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

这里我写代码，其中所有的人名都来自Facebook API。并在灯箱上显示。现在我想用javasciprt/jQuery实现搜索功能。你能帮我怎么实现搜索功能吗？如何使用Javascript或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>

来源

2012-12-25 Rushikesh jogle

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

Working Fiddle

或更好的方式：

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

Working Fiddle

来源

2012-12-25 14:33:33

有史以来最好的朋友！ –

它是否正常工作？ –

对不起，我给你的代码，不要通过单击搜索按钮进行搜索，而是自动执行！ –

也许使用的indexOf方法：

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

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

    // do someting with found item 

}

来源

2012-12-25 14:22:34 user1276919

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

演示：http://jsfiddle.net/C3PEc/2/

来源

2012-12-25 14:27:02

所以...只是因为'indexOf'，你不需要jQuery的jQuery的使用？ –

@FlorianMargaine，为事件和每个函数使用jquery。 –

@安迪感谢您的帮助:) –

你可以用它代替indexOf正则表达式，因为它可能无法在IE7/IE8 工作，并使用正则表达式，你会也可以使用'i'修饰符来使搜索不区分大小写。

谢谢

来源

2012-12-26 09:20:39 user1654525

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

回答

相关问题