如何使用Javascript或jquery实现搜索功能

在这里，我编写了所有人名都来自facebookapi的代码。它正在灯箱上显示。现在我想使用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>

邀请Facebook好友
詹姆斯
艾伦
马修

---

可能使用indexOf方法：

var text ="some name";
var search = "some";

if (text.indexOf(search)!=-1) {

    // do someting with found item

}

---

使用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();
        });
    });        
});​

演示：

或者更好的方式：

$("#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' ]();
    });
});​

---

您可以使用正则表达式而不是

indexOf

，因为它在IE7/IE8中可能不起作用 使用正则表达式还可以使用“i”修饰符使搜索不区分大小写

---

谢谢，所以。。。使用jQuery仅仅是因为

indexOf

，你不需要jQuery来处理它？@FlorianMargaine，对事件和每个函数使用jQuery。@Andy谢谢你的帮助：）当你搜索“fb 1”时，这会中断，然后改为“fb 3”。。。它不会取消隐藏“FB3”。更改此选项：

if（lb.indexOf（v）=-1）{it.hide（）；}else{it.show（）；}

对不起，我给你的代码，请不要单击搜索按钮进行搜索，而是自动搜索+1个很好的答案，但我也会让它不区分大小写：

var g=$（this.val（）.toLowerCase（）

和

var s=$（this）.text（）.toLowerCase（）

-@Mottie我还添加了小提琴的链接；）

$("#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' ]();
    });
});​