如何使用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實現搜索功能

回答

相關問題