Wie man sichtbares 'li' auf einer Suchliste zählt

Question

Der folgende Code ist für eine einfache Suche. Ich versuche, das sichtbare "li" auf der Liste zu zählen und die Summe in einem div "totalClasses" anzuzeigen. und dann, wenn der Benutzer nach einer Klasse sucht, wird die Summe nur mit den sichtbaren Klassen (li) aktualisiert.

Ich habe versucht, dies zu tun ('li: visble'), aber es funktioniert nicht.

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

Sie müssen die Anzahl jedes Mal aktualisieren, wenn Sie den Event-Handler aufrufen. Sie können wie folgt tun:

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: sichtbar' ist kein Tag, fügen Sie ein Pseudo-Selektor und das Beste zu hoffen, das wird nicht funktionieren.

Sie könnten

ul.querySelectorAll('li:visible') 

go Wenn Sie Firefox nicht egal. Wenn Sie das tun, würde ich jQuery empfehlen.

ul.find('li:visible'); 

Answer 3

ich während der Suchfunktion und aktualisieren Sie das entsprechende Element am Ende der Suchfunktion die Anzahl der Show Objekte nur speichern würde:

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

einfach aktualisieren, um die Zählung während der Suche

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

Sie versuchen, eine Ereignis-Listener-Funktion anzuhängen, bevor das Element geladen wird. Hinzufügen einer Zeile wird der Trick

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

ich Ihren Code vereinfacht:

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

Sie können für eine überprüfen Verwenden Sie den Selektor :not(), und prüfen Sie, ob etwas nicht vorhanden ist, z. B. eine Klasse. Sie würden kombinieren es dann mit querySelectorAll und bekommen die Länge wie folgt aus:

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

Was die :visible Pseudo-Klasse Selector, die eine jQuery Sache und nicht eine echte JavaScript Pseudo-Klasse ist. Ich habe die Klasse erstellt, die Sie unten sehen können.

Ich entfernte dann Ihre onkeyup in Ihrem HTML und erstellte es im Javascript unten (ich änderte es auch zu input stattdessen). Ansonsten hat sich der HTML-Code nicht geändert.

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

Hier ist, wo ich eine hidden Klasse erstellt, die ich hinzufügen/entfernen basierend auf dem eingegebenen Text.

.hidden { display: none; } 

Weiter suchen wir für den Artikel und Test gegen einen regulären Ausdruck wie folgt:

// 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; 
}); 

Das allerletzte, was wir tun, ist eine Zählung aller Elemente, die nicht über eine .hidden Klasse anhängen und es in der results Absatzmarke anzeigen.

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"; 
}