如何使用Javascript或jQuery实现搜索功能 [英] how to implement Search function using Javascript or jquery
本文介绍了如何使用Javascript或jQuery实现搜索功能的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在这里我编写代码,其中所有人名都来自Facebook API。并在灯箱上显示。现在我想用javasciprt / jQuery实现搜索功能。你能帮我实现搜索功能吗?
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 ?
<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>
推荐答案
$("#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' ]();
});
});
这篇关于如何使用Javascript或jQuery实现搜索功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文