2012-12-25 14 views
6

qui scrivo codice in cui tutti i nomi di persone provengono da Facebook API. e sta mostrando su lightbox. ora voglio implementare la funzionalità di ricerca usando javasciprt/jquery. Potete aiutarmi come devo implementare la funzione di ricerca?come implementare la funzione di ricerca utilizzando Javascript o 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> 

Image

risposta

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

+0

il migliore amico di sempre! –

+0

funziona come vuoi? –

+0

scusa il codice che ti ho dato, non effettuare la ricerca facendo clic sul pulsante di ricerca ma eseguilo automaticamente! –

0

magari utilizzare il metodo indexOf:

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

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

    // do someting with found item 

} 
0

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

+0

così ... utilizzare jQuery solo a causa del 'indexOf', che non è necessario per jQuery? –

+0

@FlorianMargaine, usa jquery per eventi e ogni funzione. –

+0

@Andy Grazie per l'aiuto :) –

0

È possibile utilizzare espressioni regolari, invece di indexOf in quanto non può funzionare in IE7/IE8 e uso delle espressioni regolari si può anche usare il modificatore 'i' per rendere insensibile la ricerca.

Grazie

Problemi correlati