使搜索输入通过列表jquery过滤 [英] Make search input to filter through list Jquery
问题描述
这是我的HTML：
< html>
< head>
< / head>
< body>
< label for =filter>过滤器< / label>
< input type =textname =filtervalue =id =filter/>
< a id =addtaghref =＃>搜寻< / a>
< ul>
< li id =Hero1>超人< / li>
< li id =Hero2>蝙蝠侠< / li>
< li id =Hero3>蜘蛛侠< / li>
< li id =Hero4>钢铁侠< / li>
< li id =Hero5>绿巨人< / li>
< / ul>
< / body>
< / html>所以，如果有人键入超人，并点击搜索按钮，那么只有超人列表元素将会显示出来。
任何帮助都会很棒。感谢。
解决方案这也使用jQuery并创建一个滑动动画。
这就是HTML：
< div id =wrap>
< h1 id =header>国家/地区< / h1>
< ul id =list>
< li>< a href =＃>列表项目< / a>< / li>
< li>< a href =＃>添加无限项目< / a>< / li>
< / ul>
< / div>
JavaScript
jQuery.expr ['：']。Contains = function（a，i，m） {
return（a.textContent || a.innerText ||）.toUpperCase（）。indexOf（m [3] .toUpperCase（））> = 0;
};
函数listFilter（header，list）{//头是任何元素，list是一个无序列表
//创建并添加过滤器表单到头
var form = $（< form>）。attr（{class：filterform，action：＃}），
input = $（< input> {class：filterinput，type：text}）;
$（form）.append（input）.appendTo（header）;
$（input）
.change（function（）{
var filter = $（this）.val（）;
if（filter）{
//找到列表中的所有链接包含输入
//并隐藏不包含输入的输入，同时显示
的输入$（list）.find（a：not（：Contains（+ filter +）））。parent（）。slideUp（）;
$（list）.find（a：Contains（+ filter +））。parent（）。slideDown（）;
} else {
$（list）.find（li）。slideDown（）;
}
返回false;
。）
.keyup（function（）{
//在每个字母之后触发上述更改事件
$（this）.change（）;
}） ;
$ b // ondomready
$（函数（）{
listFilter（$（＃header），$（＃list ））;
}）;
（jQuery））;
CSS是可选的。
JSFiddle演示： http://jsfiddle.net/4feug/
Hey, I am trying to create a search field that will filter or show/hide(which ever is best) the list elements based on what the user typed in and clicked the search button. I have no idea how to do this. everything I tried does not work unfortunately and im unsure of the best approach for this, like do i use show and hide or is there something better?
This is my 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>
So, if someone types in 'Superman' and clicks the search button, then only the Superman list element will be displayed.
Any help on this would be great. Thanks.
This uses jQuery and creates a sliding animation, too. This would be the 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 is optional. JSFiddle Demo: http://jsfiddle.net/4feug/
这篇关于使搜索输入通过列表jquery过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
