Question

我有一个通过html添加的工作搜索栏。然而，为了使代码不引人注目，我试图通过JavaScript附加搜索栏和按钮。我能够显示搜索栏和按钮，但是显示结果的功能已停止工作。

以下是在JS中添加搜索栏的部分。

var $searchSection = $('<div class="student-search"></div>');
$searchSection.append('<input id = "search-criteria" placeholder="Search for students..."></input>');
$searchSection.append('<button>Search</button>');

//Append search section
$('.page-header').append($searchSection);

我正在努力获得搜索功能。以下是搜索工作代码的链接，因为搜索栏包含在html中。 http://codepen.io/fun/pen/RRyaNm

这是通过js添加了搜索栏但没有搜索功能的代码链接。 http://codepen.io/fun/pen/VjraNd?editors=1010

如何通过添加js来实现搜索？

任何帮助或指示都会很棒。

谢谢，

哈利

Answer 1

正如Siguza所说，$('#search-criteria')在您取出它时并不存在。所以，on函数是一个好主意，但它应该这样给出：

$('.page-header').on('input', '#search-criteria', function() {
     //your code
});

它的作用是，它将函数绑定到DOM中动态添加的元素

以下是jsFiidle

它适合你。：）

Answer 2

您不必添加更多功能，只需将代码移至顶部即可。检查一下 jsfiddle https://jsfiddle.net/xt5193z1/

//Search section

var $searchSection = $('<div class="student-search"></div>');
$searchSection.append('<input id = "search-criteria" placeholder="Search for students..."></input>');
$searchSection.append('<button>Search</button>');

//Append search section
$('.page-header').append($searchSection);


var $studentItem = $('.student-item');
var $pagination = $('.pagination');
var $searchCriteria = $('#search-criteria');
var perPage = 10;


// count number of student items
var studentCount = $studentItem.length;
// number of pages = number of students / 10 rounded up
var pageNumber = Math.ceil(studentCount / perPage);
// remove all student items
var initialTen = $studentItem.hide();
// display first 10 student items
initialTen = $studentItem.slice(0, perPage).show();
// pagination ul
var paginationHTML = '<ul>';
// calc number of links
for (var i = 1; i < pageNumber + 1; i++) {
  // li and link for each page
  paginationHTML += '<li><a href ="#">' + i + '</a></li>';
}
// end of ul
paginationHTML += '</ul>';
// display list to page
$pagination.html(paginationHTML);
// pagination link click
$('.pagination li a').on('click', function() {
  // remove active
  $('.pagination li a.active').removeClass('active');
  // add active class
  $(this).addClass('active');
  // page number of clicked
  var pageNum = this.text;
  // Start point for slice
  // e.g 3 * 10
  var startFrom = pageNum * perPage - perPage;
  // end point for slice
  // e.g 30 + 10
  var endOn = startFrom + perPage;
  // display students based on number clicked
  $studentItem.hide().slice(startFrom, endOn).show();

});





// Error message for no matches found
var $noMatches = $('<h2>No matches found please try again</h2>');
// Add to page
$('.page').append($noMatches);
// hide initially
$noMatches.hide();

// search box on type
$searchCriteria.on('input', function() {
  // remove all result classes
  $studentItem.each(function() {
    $(this).removeClass("result");
  });

  // value of searched
  var text = $(this).val().toLowerCase();
  // results of search  
  var results = $("ul.student-list li:contains('" + text.toLowerCase() + "')");
  results.addClass("result");
  // show or hide based on result matching div
  $studentItem.each(function() {
    if ($(this).hasClass('result')) {
      $(this).show("slow");
    } else {
      $(this).hide();

    }

  });

  if (results.length > 10) {

    // remove all student items
    var initialTen = $studentItem.hide();
    // display first 10 student items
    initialTen = $studentItem.slice(0, perPage).show();
    // show pagination
    $('.pagination').show();
    // hide no matches message
    $noMatches.hide();
  } else if (results.length === 0) {
    $pagination.hide();
    $noMatches.show();

  } else {
    $pagination.hide();
  }

});

通过JavaScript添加搜索栏

2 个答案: