Question

我是JS的新手，但是具有C和HTML的丰富知识，并且想要创建一个搜索框，以便在我编写内容时出现一个带有一些结果的下拉列表。我已经有创建动画搜索字段的代码（不是我的）和创建此搜索过滤器列表的代码，但是我不知道如何“连接”它们。

以下是搜索栏过滤器的JS部分：（要使用它，您只需要此html代码 flex: 1 1 auto是小提琴：https://jsfiddle.net/c30L5esq/）

<input type="text" id="searchInput" placeholder="Search article"/>

这是搜索栏全屏动画的链接： 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

Answer 2

我认为您要查找的是自动完成的搜索输入。为此，我们必须使用typeahead.js插件。您可以使用插件上的链接和Codepen示例链接。链接中有多个示例demos。

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  source: substringMatcher(states)
});

<div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.min.js"></script>

html，JS搜索字段列表

2 个答案: