Skjule rader med javascript ut ifra input felt

23. november 2020

Hei Folkens.

Jeg har en del "ting" som listes nedover på en side.

Koden ser noe sånn her ut:

Kode

<div class="liste">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="liste">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="liste">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
......

Osv.

Jeg har også et input felt der man kan skrive inn f.eks "data" også vil jeg at alle div med klassen "liste" som har div inni med et ord på data skal vises og resten skal skjules.
Alt med javascript.

Akkurat nå er javascripten min ganske basic. Dette er hva jeg har.

Kode

var input, filter, row, div, i, txtValue;
input = document.querySelector('#b_search_field');
filter = input.value.toUpperCase();
row = document.querySelector('.liste');
div = row.getElementsByTagName('div');

Hvordan skal jeg loope igjennom her? Må jeg først loope igjennom alle div's med klassen .liste også igjennom alle DIV inni der igjen?

--Takk

NAPse

I see you...

380 221

23. november 2020

Du kan loope igjennom hver .liste og ha en nested loop for hver div inni der igjen.

Eller så kan du bruke querySelectorAll() for å få tak i div-elementene du er ute etter.
Så vidt jeg vet looper den gjennom hver .liste først uansett, men det skjer i såfall bak kulissene.

Eller så kan du gi alle disse div-elementene en egen klasse. F.eks .filter-div og bruke querySelectorAll('.filter-div') og loope igjennom disse.

Eksempel:

Kode

var input, filter, row, div, i, txtValue;
input = document.querySelector('#b_search_field');
filter = input.value.toUpperCase();
listDivs = document.querySelectorAll('.liste div'); //Legg merke til querySelectorALL og query er av divs som er barn av liste-klassen

for(div of listDivs){ //Looper gjennom hver div som er barn av .liste-klassen

  //Eksempel på kode for skjuling.
  if(filter === "" && div.innerText.toUpperCase() === filter){ //Tomt filter eller filter-match for gjeldene div
    div.classList.remove('hidden');
  }
  else{
    div.classList.add('hidden');
  }

}

Dette vil dog ikke hjelpe deg med å finne ord som er inneholdt i en setning. For det blir du nok nødt til å bruke Regular expressions.

Sist endret av NAPse; 23. november 2020 kl. 11:08. Grunn: Looper, ikke lopper

Yochi

1.017 228

23. november 2020

Du kan bruke "includes" på strengen for å slippe regex (ganske bra støttet om en ikke trenger IE):

Kode

document.querySelector('#filter').addEventListener('keyup', function(e) {
  const filterValue = (e.target.value).toLowerCase();
  const items = document.querySelectorAll('.list');
  
  for (let i = 0; i < items.length; i++) {
    const text = (items[i].innerText).toLowerCase();

    
    if (!text.includes(filterValue)) {
      items[i].classList.add('hidden');
    }
    else {
      items[i].classList.remove('hidden');
    }
    
    // Vis alle elementene om filteret tas vekk.
    if (filterValue == '') {
      items[i].classList.remove('hidden');
    }
  }

});