通过JavaScript添加搜索栏

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

你不必添加更多的函数，只需将你的代码移到顶部即可。检查此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();
  }

});

Answer 2

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

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

它所做的是将函数绑定到在DOM中动态添加的元素

这是jsFiidle

它将为您工作。:)