javascript - html,JS搜索字段列表

Question

我是 JS 新手，但对 C 和 HTML 有很好的了解，并且想要创建一个搜索框，以便当我编写内容时，会出现一个包含一些结果的下拉列表。我已经有了创建动画搜索字段的代码(不是我的)和创建此搜索过滤器列表的代码，但我不知道如何“连接”它们。

这是搜索栏过滤器的 JS 部分:(要使用它，您只需要这个 html 代码 <input type="text" id="searchInput" placeholder="Search article"/>这是 fiddle :https://jsfiddle.net/c30L5esq/ )

$("#searchInput").on('keyup', function() {
  var searchValue = $(this).val().toUpperCase();
  if(searchValue.length > 0) {
    searchAndFilter(searchValue);
  } else {
    $("#articlesearch li").hide();
  }
});

function searchAndFilter(searchTerm) {
  $("#articlesearch li").each(function() {
    var currentText = $(this).text().toUpperCase();
    if (currentText.indexOf(searchTerm) >= 0) {
      $(this).show();
    } else {
        $(this).hide();
    }
  });
}

$(document).ready(function() {
  $("#articlesearch li").hide();
});

这是搜索栏全屏动画的链接: https://codepen.io/suez/pen/obpLvy/

我想要的是，当我使用此搜索栏动画时，我实际上可以搜索列表，它会显示与我在下拉列表中输入的内容相匹配的结果。

谢谢!

Answer 1

$(document).ready(function() {
  var list = $("#articlesearch>li");
  list.hide();

  $(document).on('input', "#searchInput", function() {
    /* searchAndFilter($(this).val()) */
    list.hide();
    var searchTerm = ($(this).val() + '').toUpperCase();
    if (searchTerm.length > 0) {
      list.each(function() {
        var currentText = $(this).text().toUpperCase();
        if (currentText.indexOf(searchTerm) >= 0) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });
    }
  });
});

Jsfiddle:https://jsfiddle.net/ravinila/ghovnzty/13