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

【问题标题】：how to implement Search function using Javascript or jquery如何使用 Javascript 或 jquery 实现搜索功能
【发布时间】：2012-12-25 14:12:32
【问题描述】：

我在这里编写代码，其中所有人的名字都来自 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>

【问题讨论】：

标签： javascript jquery html jquery-ui javascript-events

【解决方案1】：

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

【讨论】：

对不起，我给你的代码，不要点击搜索按钮搜索，而是自动搜索！
+1 不错的答案，但我也会让它不区分大小写：var g = $(this).val().toLowerCase(); 和 var s = $(this).text().toLowerCase() - updated demo
@Mottie 我也添加了你的小提琴的链接；）

【解决方案2】：

使用 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/

【讨论】：

所以...使用 jQuery 只是因为 indexOf，你不需要 jQuery 吗？
@FlorianMargaine，对事件和每个函数使用 jquery。
@Andy 谢谢你的帮助 :)
当您搜索“fb 1”然后更改为“fb 3”时，这会中断......它不会取消隐藏“fb 3”。改变这个：if (lb.indexOf(v) == -1) { it.hide(); } else { it.show(); }

【解决方案3】：

也许使用 indexOf 方法：

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

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

    // do someting with found item

}

【讨论】：

【解决方案4】：

您可以使用正则表达式代替indexOf，因为它在IE7/IE8 中可能不起作用并且使用正则表达式，您还可以使用 'i' 修饰符使搜索不区分大小写。

谢谢

【讨论】：