Comment compter 'li' visible sur une liste de recherche

Question

Le code ci-dessous est pour une recherche simple. Im essayant de compter le «li» visible sur la liste et afficher le total dans un div «totalClasses». et puis lorsque l'utilisateur recherche une classe mettre à jour le total avec seulement les classes visibles (li).

J'ai essayé de le faire ('li: visble') mais ne fonctionne pas.

ul = document.getElementById('myUl'); 
 
li = ul.getElementsByTagName('li'); 
 
aa = ul.getElementsByTagName('li:visible'); 
 
document.getElementById('totalClasess').innerHTML = (aa.length) + " Results"; 
 

 
function search() { 
 
    var input, filter, ul, li, a, aa; 
 
    input = document.getElementById('myInput'); 
 
    filter = input.value.toUpperCase(); 
 
    ul = document.getElementById('myUl'); 
 
    li = ul.getElementsByTagName('li'); 
 

 
    for (var i = 0; i < li.length; i++) { 
 
    a = li[i].getElementsByTagName('a')[0]; 
 
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
     li[i].style.display = ''; 
 
    } else { 
 
     li[i].style.display = 'none'; 
 
    } 
 
    } 
 
}

<input type="text" id="myInput" onkeyup="search()" placeholder="Search for a class..." title="Type something"> 
 
<p class="results">Results</p> 
 
<p id="totalClasess"></p> 
 
<ul id="myUl"> 
 
    <li><a href="#" class="header">Section 1</a></li> 
 
    <li><a href="#">Class 1 </a></li> 
 
    <li><a href="#">Class 2</a></li> 
 
    <li><a href="#">Class 3</a></li> 
 
</ul>

DEMO: https://jsfiddle.net/52bbqor9/

Answer 1

Vous devez mettre à jour le nombre chaque fois que vous appelez le gestionnaire d'événements. vous pouvez faire comme ceci:

function search() 
{ 
    var input, filter, ul, li, a, aa; 
    input = document.getElementById('myInput'); 
    filter = input.value.toUpperCase(); 
    ul  = document.getElementById('myUl'); 
    li  = ul.getElementsByTagName('li'); 
    var liCount = 0; 
    for(var i=0; i<li.length; i++){ 
     a = li[i].getElementsByTagName('a')[0]; 
     if(a.innerHTML.toUpperCase().indexOf(filter) > -1){ 
      li[i].style.display = ''; 
      liCount++; 
     } else { 
      li[i].style.display = 'none'; 
     } 
    } 
    document.getElementById('totalClasess').innerHTML = liCount + " Results"; 
} 

Answer 2

'li: visible' est pas une balise, vous ajoutez un pseudo-sélecteur et en espérant pour le mieux, qui ne fonctionnera pas.

Vous pouvez aller

ul.querySelectorAll('li:visible') 

Si vous ne se soucient pas de Firefox. Si vous le faites, je recommanderais jQuery.

ul.find('li:visible'); 

Answer 3

Je voudrais juste stocker le nombre d'objets d'exposition pendant la fonction de recherche et mettre à jour l'élément concerné à la fin de la fonction de recherche:

function search() { 
    var input, filter, ul, li, a, aa, count =0; 
    input = document.getElementById('myInput'); 
    filter = input.value.toUpperCase(); 
    ul = document.getElementById('myUl'); 
    li = ul.getElementsByTagName('li'); 

    for (var i = 0; i < li.length; i++) { 
    a = li[i].getElementsByTagName('a')[0]; 
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
     li[i].style.display = ''; 
     count++; 
    } else { 
     li[i].style.display = 'none'; 
    } 
    } 
    document.getElementById('totalClasess').innerHTML = count + " Results"; 
} 

Answer 4

actualisateurs le compte lors de la recherche

var ip = document.getElementById('myInput'); 
 
var ul = document.getElementById('myUl'); 
 
var li = ul.getElementsByTagName('li'); 
 

 
document.getElementById('totalClasess').innerHTML = (li.length) + " Results"; 
 

 
ip.addEventListener('input', function() { 
 
    var val = this.value.toUpperCase(), idx = 0; 
 

 
    for (var i = 0; i < li.length; i++) { 
 
    var txt = li[i].textContent.toUpperCase(); 
 

 
    if (txt.indexOf(val) != -1) { 
 
     li[i].style.display = 'block'; 
 
     idx++; 
 
    } else { 
 
     li[i].style.display = 'none'; 
 
    } 
 

 
    document.getElementById('totalClasess').innerHTML = idx + " Results"; 
 
    } 
 
});

<input type="text" id="myInput" placeholder="Search for a class..." title="Type something"> 
 
<p class="results">Results</p> 
 
<p id="totalClasess"></p> 
 
<ul id="myUl"> 
 
    <li><a href="#" class="header">Section 1</a></li> 
 
    <li><a href="#">Class 1 </a></li> 
 
    <li><a href="#">Class 2</a></li> 
 
    <li><a href="#">Class 3</a></li> 
 
</ul>

Answer 5

Vous tentez d'attacher une fonction d'écouteur d'événement avant le chargement de l'élément. Ajout d'une ligne fera l'affaire

document.getElementById('myInput').onkeyup = search; 

working code

Answer 6

ul = document.getElementById('myUl'); 
 
li = ul.getElementsByTagName('li'); 
 

 
divs = document.querySelectorAll('#myUl > li'); 
 
var divsArray = [].slice.call(divs); 
 
var aa = divsArray.filter(function(el) { 
 
    return getComputedStyle(el).display !== "none" 
 
}); 
 

 

 
document.getElementById('totalClasess').innerHTML = (aa.length) + " Results"; 
 

 
function search() { 
 
    var input, filter, ul, li, a, aa; 
 
    input = document.getElementById('myInput'); 
 
    filter = input.value.toUpperCase(); 
 
    ul = document.getElementById('myUl'); 
 
    li = ul.getElementsByTagName('li'); 
 

 
    for (var i = 0; i < li.length; i++) { 
 
    a = li[i].getElementsByTagName('a')[0]; 
 
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
     li[i].style.display = ''; 
 
    } else { 
 
     li[i].style.display = 'none'; 
 
    } 
 
    }; 
 
    var divsArray = [].slice.call(divs); 
 
    aa = divsArray.filter(function(el) { 
 
    return getComputedStyle(el).display !== "none" 
 
}); 
 
document.getElementById('totalClasess').innerHTML = (aa.length) + " Results"; 
 
}

<input type="text" id="myInput" onkeyup="search()" placeholder="Search for a class..." title="Type something"> 
 
<p class="results">Results</p> 
 
<p id="totalClasess"></p> 
 
<ul id="myUl"> 
 
    <li><a href="#" class="header">Section 1</a></li> 
 
    <li><a href="#">Class 1 </a></li> 
 
    <li><a href="#">Class 2</a></li> 
 
    <li><a href="#">Class 3</a></li> 
 
</ul>

Answer 7

J'ai simplifié votre code:

https://jsfiddle.net/52bbqor9/1/

Vous pouvez vérifier un élément en utilisant le sélecteur :not(), et vérifier pour voir si quelque chose n'existe pas, comme une classe. Ensuite, vous voulez combiner avec querySelectorAll et obtenir la longueur comme ceci:

let itemCount = document.querySelectorAll('#myUl li:not(.hidden)').length; 

En ce qui concerne le sélecteur :visible pseudo-classe qui est une chose jQuery et pas un vrai JavaScript pseudo-classe. J'ai créé la classe hidden que vous pouvez voir ci-dessous.

J'ai ensuite retiré votre onkeyup dans votre fichier html et l'ai créé dans le javascript ci-dessous (je l'ai également changé en input à la place). Sinon, le code HTML n'a pas changé.

<input type="text" id="myInput" placeholder="Search for a class..." title="Type something"> 
<p class="results">Results</p> 
<p id="totalClasess"></p> 
<ul id="myUl"> 
    <li><a href="#" class="header">Section 1</a></li> 
    <li><a href="#">Class 1 </a></li> 
    <li><a href="#">Class 2</a></li> 
    <li><a href="#">Class 3</a></li> 
</ul> 

Ici, je créé une classe hidden que j'ajouter/supprimer à partir du texte d'entrée.

.hidden { display: none; } 

Ensuite, nous la recherche de l'élément et le test contre une expression régulière comme ceci:

// Get the elements we want to work with 
let input = document.querySelector('#myInput'); 
let list = document.querySelectorAll('#myUl li'); 
let results = document.querySelector('.results'); 

// Attach an eventlistener to the search box 
input.addEventListener('input', e => { 
    // Create a regexp to test against each item 
    let search = new RegExp('^' + e.target.value, 'i'); 
    // Loop through the list of li items 
    for (let item of list) { 
    // Test the current item 
    if (search.test(item.innerText.trim())) { 
     // Remove the hidden class if it matches 
     item.classList.remove('hidden'); 
    } else { 
     // Add the hidden class if it doesn't match 
     item.classList.add('hidden'); 
    } 
    } 
    // Get a count of li items without `.hidden` 
    results.innerText = 'Results ' + document.querySelectorAll('#myUl li:not(.hidden)').length; 
}); 

La dernière chose que nous faisons est d'obtenir un compte de tous les éléments qui n'ont pas .hidden classe attachée à elle et l'afficher dans la balise de paragraphe results.

Answer 8

function search() { 
var input,filter,ul,li,a,aa; 
input = document.getElementById('myInput'); 
filter = input.value.toUpperCase(); 
ul = document.getElementById('myUl'); 
li = ul.getElementsByTagName('li'); 

for (var i = 0; i < li.length; i++) { 
    a = li[i].getElementsByTagName('a')[0]; 
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 

     li[i].style.display = ''; 
    } else { 
     li[i].style.display = 'none'; 
    } 
} 

var visibleLi = []; 
var items = document.getElementById("myUl").getElementsByTagName("li"); 
for (var i = 0; i < items.length; i++) { 

    if (items[i].style.display != "none") { 
     visibleLi.push(items[i]); 
    } 
} 
document.getElementById('totalClasess').innerHTML = (visibleLi.length) + " 
Results"; 
}