通过JavaScript添加搜索栏

adding search bar through JavaScript

本文关键字：搜索栏 添加 JavaScript 通过      更新时间：2023-09-26

我有一个通过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添加来进行搜索？

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

谢谢你，

Harry

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

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

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

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

这是jsFiidle

它对你有用。：）

相关文章：