Javascript 如何使用Javascript或jquery实现搜索功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14031369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to implement Search function using Javascript or jquery
提问by Rushikesh jogle
here i write code where all persons names comes from Facebook API . and it is showing on lightbox. now i want to implement search functionality using javasciprt/jquery . Can you help me how should i implement search function ?
在这里我编写代码，其中所有人的名字都来自 Facebook API。它显示在灯箱上。现在我想使用 javasciprt/jquery 实现搜索功能。你能帮我实现搜索功能吗？
<div> <input type="text" id="search-criteria"/>
<input type="button" id="search" value="search" onClick="tes();"/> </div>
<fieldset>
<legend>Invite Facebook Friend</legend>
<div class="fbbox">
<img src="images/User.png" class="fbimg" />
<div class="fix"><label for="check-2" class="left"> James </label></div>
<input type="checkbox" name="fb" id="check-1" value="action" class="leftcx"/>
</div>
<div class="fbbox">
<img src="images/User.png" class="fbimg" />
<div class="fix"><label for="check-2" class="left">Alan </label></div>
<input type="checkbox" name="fb" id="check-2" value="comedy" class="leftcx"/>
</div>
<div class="fbbox">
<img src="images/User.png" class="fbimg" />
<div class="fix"><label for="check-3" class="left"> Mathew </label></div>
<input type="checkbox" name="fb" id="check-3" value="epic" class="leftcx"/>
</div>
回答by Muhammad Talha Akbar
$("#search-criteria").on("keyup", function() {
var g = $(this).val();
$(".fbbox .fix label").each( function() {
var s = $(this).text();
if (s.indexOf(g)!=-1) {
$(this).parent().parent().show();
}
else {
$(this).parent().parent().hide();
}
});
});?
or Better Way:
或更好的方法：
$("#search-criteria").on("keyup", function() {
var g = $(this).val().toLowerCase();
$(".fbbox .fix label").each(function() {
var s = $(this).text().toLowerCase();
$(this).closest('.fbbox')[ s.indexOf(g) !== -1 ? 'show' : 'hide' ]();
});
});?
回答by Andy Ecca
Use Jquery
使用jQuery
? $(document).ready(function(){
var search = $("#search-criteria");
var items = $(".fbbox");
$("#search").on("click", function(e){
var v = search.val().toLowerCase();
if(v == "") {
items.show();
return;
}
$.each(items, function(){
var it = $(this);
var lb = it.find("label").text().toLowerCase();
if(lb.indexOf(v) == -1)
it.hide();
});
});
});?
Demo : http://jsfiddle.net/C3PEc/2/
回答by user1276919
Maybe use indexOf method:
也许使用 indexOf 方法：
var text ="some name";
var search = "some";
if (text.indexOf(search)!=-1) {
// do someting with found item
}
回答by user1654525
You can use regular expression instead of indexOfas it may not work in IE7/IE8
and using regular expression you will can also use the 'i' modifier to make the search case insensitive.
您可以使用正则表达式，indexOf因为它在 IE7/IE8 中可能不起作用，并且使用正则表达式您还可以使用 'i' 修饰符使搜索不区分大小写。
Thanks
谢谢
