Filtrer par une recherche en utilisant le texte dans l'élément à l'intérieur de chaque div

J'ai trouvé un violon qui a été utile pour cacher le texte sur la base du texte utilisé dans une zone de recherche, mais n'ont pas été en mesure de comprendre comment adapter cette méthode à un div avec de multiples éléments. Comment pourrais-je changer le jQuery dans le violon pour faire de filtrer les éléments div qui correspondent à la recherche, entré à la place du texte dans la liste des éléments?

http://jsfiddle.net/point71echo/rof67uy6/2/

<input placeholder="Search Me" id="box" type="text" />

<ul class="navList">
    <li>apples</li>
    <li>apricots</li>
    <li>acai</li>
    <li>blueberry</li>
    <li>bananas</li>
    <li>cherry</li>
    <li>coconut</li>
    <li>donut</li>
    <li>durean</li>
</ul>


        <div class="connect-cat" catname="apples" style="visibility: visible; display: block;">
            <a href="/connect/apples">
                <div style="padding:5px;cursor:pointer;">
                    <div>
                        <img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apples">
                    </div>
                    <span>apples</span>
                </div>
            </a>
        </div>



        <div class="connect-cat" catname="apricots" style="visibility: visible; display: block;">
            <a href="/connect/apricots">
                <div style="padding:5px;cursor:pointer;">
                    <div>
                        <img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apricots">
                    </div>
                    <span>apricots</span>
                </div>
            </a>
        </div>

Voici le jQuery utilisé:

$('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis == ""){
        $('.navList > li').show();
    } else {
        $('.navList > li').each(function(){
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
   };
});

OriginalL'auteur point71echo | 2014-11-24

12

Si j'ai besoin d'ajouter un autre élément de texte à chaque div boîte, est-il possible que la totalité du texte dans chaque div pourrait faire l'objet de recherches? Voici le violon avec un autre élément de texte - jsfiddle.net/point71echo/mttgj1tt/1 – point71echo

Voici une solution à la recherche de deux éléments à la fois en JavaScript natif, sans aucune bibliothèques.
```
document.getElementById("box").onkeyup=function(){
  var matcher = new RegExp(document.getElementById("box").value, "gi");
  for (var i=0;i<document.getElementsByClassName("connect-cat").length;i++) {
    if (
      matcher.test(document.getElementsByClassName("name")[i].innerHTML) || 
      matcher.test(document.getElementsByClassName("category")[i].innerHTML)
    ) {
      document.getElementsByClassName("connect-cat")[i].style.display="inline-block";
    } else {
      document.getElementsByClassName("connect-cat")[i].style.display="none";
    }
  }
}
```
JSFiddle

Si vous souhaitez utiliser jQuery pour le rendre plus lisible (ces stupides longue fonctions DOM):
```
$("#box").on('keyup', function(){
  var matcher = new RegExp($(this).val(), 'gi');
  $('.connect-cat').show().not(function(){
      return matcher.test($(this).find('.name, .category').text())
  }).hide();
});
```
JSFiddle

Si j'ai besoin d'ajouter un autre élément de texte à chaque div boîte, est-il possible que la totalité du texte dans chaque div pourrait faire l'objet de recherches? Voici le violon avec un autre élément de texte - jsfiddle.net/point71echo/mttgj1tt/1
Je sais que c'est assez vieux, mais j'ai fait une mise à jour de toute façon. J'ai fait de mieux, et a également ajouté une version jQuery.
L'utilisation de 'g' (global) dans RegExp cette façon est mauvaise. Il a un état qui salit tout. Ne me croyez pas? Essayez de rechercher pour "ra" et de vous y voir que des "orange" au lieu de "radis". Fixe: jsfiddle.net/mttgj1tt/39

OriginalL'auteur

Cela devrait correspondre uniquement les divs avec la classe connectez-le chat, et le filtre par la durée de l'intérieur.

$('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis === ""){
        $('div.connect-cat').show();
    } else {
        $('div.connect-cat').each(function(){
            var text = $(this).find('span').text().toLowerCase();
            if (text.indexOf(valThis) >= 0) { $(this).show(); }
            else { $(this).hide(); }
        });
   }
});

http://jsfiddle.net/reyjose/40u0var6/

OriginalL'auteur Jose Rey

$('#box').keyup(function(){
    var valThis = $(this).val().toLowerCase();
        if(valThis == ""){
            $('.connect-cat').show();
        } else {
            $('.connect-cat').each(function(){
            var text = $(this).find("span").text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
    };
});

Si vous avez plusieurs "couvre" dans le div, il suffit d'ajouter un nom de classe à elle. Puis changement

var text = $(this).find("span").text().toLowerCase();

var text = $(this).find(".spanClassName").text().toLowerCase();

OriginalL'auteur Aaron Chen

0

Filtrer par une recherche en utilisant le texte dans l'élément à l'intérieur de chaque div cliquez sur le bouton:

comment cliquez avec le bouton de recherche
ajouter le jsfiddle lien dans le post plz.

OriginalL'auteur Khann Sothea

Vous devez vous connecter pour publier un commentaire.