jak zaimplementować funkcję wyszukiwania za pomocą Javascript lub jquery

Question

tutaj piszę kod, w którym wszystkie nazwiska osób pochodzi z interfejsu API Facebooka. i wyświetla się w lightboxie. teraz chcę zaimplementować funkcję wyszukiwania za pomocą javasciprt/jquery. Czy możesz mi pomóc, w jaki sposób mogę zaimplementować funkcję wyszukiwania?

<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

or 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

Może użyć metody IndexOf:

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

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

    // do someting with found item 

} 

Answer 3

Używaj 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

Można użyć wyrażenia regularnego zamiast indexOf ponieważ nie może pracować w IE7/IE8 i za pomocą wyrażenia regularnego będzie może również użyć modyfikatora "i", aby uczynić wyszukiwanie nieodczuwalnym.

Dzięki