wie zu implementieren Suchfunktion mit Javascript oder jquery

Question

Hier schreibe ich Code, wo alle Personen Namen kommt von Facebook API. und es ist auf dem Leuchtkasten angezeigt. Jetzt möchte ich die Suchfunktion mit javascipt/jquery implementieren. Können Sie mir helfen, wie ich Suchfunktion implementieren sollte?

<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

verwenden Vielleicht indexOf Methode:

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

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

    // do someting with found item 

} 

Answer 3

Verwenden 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

Sie reguläre Ausdrücke statt indexOf verwenden können, da es nicht in IE7/IE8 arbeiten kann und regulären Ausdruck Sie Sie können auch den Modifikator "i" verwenden, um die Suche unabhängig von der Groß-/Kleinschreibung zu machen.

Danke