使搜索输入过滤列表Jquery

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

这是我的HTML：

    Filter  Search 
 
Superman
 
Batman
 
Spiderman
 
Iron Man
 
The Hulk
 
   

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

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

Answer 1

这使用jQuery并创建滑动动画。 这将是HTML：

 
 
List of countries
 
 
List Item
 
Add Unlimited Items
 
  

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 = $("
").attr({"class":"filterform","action":"#"}), 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/

Answer 2

你可能最好使用jQuery Search Plugin， 比如这个。

Answer 3

非常基本的版本，但不需要插件，它的工作原理：

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

Answer 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; });