cách triển khai chức năng Tìm kiếm bằng cách sử dụng Javascript hoặc jquery

Question

tại đây tôi viết mã nơi tất cả các tên người đến từ API Facebook. và nó được hiển thị trên hộp đèn. bây giờ tôi muốn thực hiện chức năng tìm kiếm bằng cách sử dụng javasciprt/jquery. Bạn có thể giúp tôi làm thế nào tôi nên thực hiện chức năng tìm kiếm?

<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> 

Answer 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

hoặc 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' ](); 
    }); 
});​ 

Working Fiddle

Answer 2

Có thể sử dụng phương pháp indexOf:

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

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

    // do someting with found item 

} 

Answer 3

Sử dụng 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(); 
     }); 
    });   
});​ 

Demo: http://jsfiddle.net/C3PEc/2/

Answer 4

Bạn có thể sử dụng biểu thức chính quy thay vì indexOf vì nó có thể không hoạt động trong IE7/IE8 và sử dụng biểu thức chính quy bạn sẽ cũng có thể sử dụng công cụ sửa đổi 'i' để làm cho trường hợp tìm kiếm không nhạy cảm.

Cảm ơn