comment mettre en œuvre la fonction de Recherche à l'aide de Javascript ou jquery

ici, j'écris du code, où tous les noms de personnes vient de Facebook API . et il est à l'affiche sur l'album. maintenant, je veux mettre en œuvre la fonctionnalité de recherche à l'aide de javasciprt/jquery . Pouvez-vous m'aider comment dois-je mettre en œuvre la fonction de recherche ?

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

InformationsquelleAutor Rushikesh jogle | 2012-12-25

$("#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();
        }
    });
});

Travail De Violon

ou de la Meilleure Façon:

$("#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' ]();
    });
});

Travail De Violon

meilleur copain!
est-il fonctionne comme vous le souhaitez?
désolé man, le code que je vous ai donné, ne recherche en cliquant sur le bouton de recherche, mais le faire automatiquement!
Merci Man !!! Merci Beaucoup .. Oui, Il est de travail 🙂
+1 Belle réponse, mais je voudrais aussi rendre insensible à la casse: var g = $(this).val().toLowerCase(); et var s = $(this).text().toLowerCase() - mise à jour de la démo
J'ai ajouter le lien de votre violon aussi 😉

InformationsquelleAutor Muhammad Talha Akbar

Utilisation 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();
        });
    });        
});

Démo : http://jsfiddle.net/C3PEc/2/

Alors... utiliser jQuery juste à cause de indexOf, que vous n'avez pas besoin de jQuery pour?
utilisation de jquery pour des événements et de chaque fonction.
Merci pour l'aide 🙂
Cela casse lors de la recherche pour "1 fb" puis à "fb 3"... il ne sera pas afficher "fb 3". Modifiez ce qui suit: if (lb.indexOf(v) == -1) { it.hide(); } else { it.show(); }

InformationsquelleAutor Andy Ecca

Peut-être utiliser la méthode indexOf:

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

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

    //do someting with found item

}

InformationsquelleAutor user1276919

0

Vous pouvez utiliser une expression régulière au lieu de indexOf comme il peut ne pas fonctionner dans IE7/IE8
et l'utilisation d'une expression régulière, vous pouvez également utiliser le " je " modificateur de faire de la recherche insensible à la casse.

Grâce

InformationsquelleAutor user1654525

Vous devez vous connecter pour publier un commentaire.