进行搜索输入以过滤列表 Jquery答案

【问题标题】：Make search input to filter through list Jquery进行搜索输入以过滤列表 Jquery
【发布时间】：2010-12-18 11:42:13
【问题描述】：

嘿，我正在尝试创建一个搜索字段，该字段将根据用户输入的内容并单击搜索按钮来过滤或显示/隐藏（最好的）列表元素。我不知道该怎么做。不幸的是，我尝试的所有方法都不起作用，我不确定最好的方法，比如我是使用 show and hide 还是有更好的方法？

这是我的 HTML：

<html>
    <head>

    </head>
    <body>
    <label for="filter">Filter</label>  
    <input type="text" name="filter" value="" id="filter" />

        <a id="addtag" href="#">Search</a> 

    <ul>
        <li id="Hero1">Superman</li>
        <li id="Hero2">Batman</li>
        <li id="Hero3">Spiderman</li>
        <li id="Hero4">Iron Man</li>
        <li id="Hero5">The Hulk</li>
    </ul>

    </body>
</html>

因此，如果有人输入“超人”并单击搜索按钮，则只会显示超人列表元素。

对此的任何帮助都会很棒。谢谢。

【问题讨论】：

标签： jquery input filter hide show

【解决方案1】：

这也使用了 jQuery 并创建了一个滑动动画。这将是 HTML：

<div id="wrap">
  <h1 id="header">List of countries</h1>
  <ul id="list">
    <li><a href="#">List Item</a></li>
            <li><a href="#">Add Unlimited Items</a></li>
</ul>
</div>

JavaScript

(function ($) {
  // custom css expression for a case-insensitive contains()
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };


  function listFilter(header, list) { // header is any element, list is an unordered list
    // create and add the filter form to the header
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);

    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          // this finds all links in a list that contain the input,
          // and hide the ones not containing the input while showing the ones that do
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();
        } else {
      $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        // fire the above change event after every letter
        $(this).change();
    });
  }


  //ondomready
  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

CSS 是可选的。 JSFiddle 演示：http://jsfiddle.net/4feug/

【讨论】：

【解决方案2】：

使用 jQuery 搜索插件可能会更好，like this one.

【讨论】：

我不喜欢 keyup 方法。我想按下搜索按钮并根据输入的整个字符串显示结果。
只需在插件代码中挂钩按钮的click方法，而不是搜索文本框中的keyup方法。也就是说，用户真的很喜欢这种可折叠的行为，它适用于数百行。

【解决方案3】：

非常基本的版本，但不需要插件并且可以工作：

$("#addtag").click(function(){
  $("ul li").hide()
  .filter(":contains('"+ $("#filter").val() +"')").show()
  return false;
})

【讨论】：

+1 我刚试了一下，确实有效（虽然匹配区分大小写）。
如何在这个表达式中将 li.text() 小写？ val 是“孤立的”，但 li.text 不在表达式中。有办法吗？

【解决方案4】：

对duckyflip 的回答稍作改进，使搜索不区分大小写：

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

$("#addtag").click(function(){
    $("ul li").hide()
    .filter(":contains('"+ $("#filter").val() +"')").show()
    return false;
});

【讨论】：