Filter Producten

dan tel je na afloop hoeveel li's je zichtbaar hebt gehouden / gemaakt.

      $(document).ready(function(){
         $("#productInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#productList li").filter(function() {
               $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
              
            });

             var aantalzichtbaar = $("#productList li:visible").length;
             if(aantalzichtbaar > 0) {
               $('#niets').show();
             } else {
               $('#niets').hide();
              }
         });
      });

en je hebt dan iets als
<span id="niets">Sorry, niets gevonden</span>
in je html nodig

Ahhh dat is best logisch ja! Thx!!

ik vraag me trouwens af of toggle() wel doet wat je nodig hebt, zoals je het hier gebruikt

Hij doet het ook niet waarom weet ik niet. Ik heb dit toegevoegd onder de ul:

 
      <span style="width:75%;" id="niets">
          <h2 style="text-align: center;"> 
               I am sorry, we could not find a product that contains what you have entered 
          </h2>
      </span>

En heb toegevoegd wat u heeft gezegd

Gooi eens wat informatie in de console?

Kijk bijvoorbeeld eens wat de waarde van aantalzichtbaar is.

Het niet kunnen debuggen van JavaScript/jQuery vormt een grote / wellicht onoverkomelijke belemmering bij het bouwen ervan.

Dus leer te debuggen, en het programma kan jou zelf vertellen waarom het niet werkt.

ik heb trouwens show() en hide() verkeerd om staan.

Ja dat merkte ik al!


[size=xsmall]Toevoeging op 29/05/2020 10:09:02:[/size]

Hi het is me gelukt maar ben nu tegen een ander probleem aangelopen. Ik heb namelijk toegevoegd dat er class (notfound) moet worden toegevoegd als de span zichtbaar is, maar deze class wordt niet goed toegevoegd. Hij doet het de eerste keer wel als ik dan nog een letter invul voegt hij hem niet toe en dan weer wel. De class notfound kan ik niet normaal toevoegen aan de span aangezien er position: absolute; in staat en dan is hij altijd zichtbaar.

Wat kan ik hier aan doen? Dit is mijn javascript code:

[code]
$(document).ready(function(){
$("#productInput").on("keyup", function() {
//alles lower case maken zodat het te vergelijken is
var value = $(this).val().toLowerCase();
// alles tonen wat overeenkomt met het ingevulde
$("#productList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});

//variable aantalzichtbaar gelijk stellen aan de het aantal li's dat zichtbaar is in de ul
var aantalzichtbaar = $("#productList li:visible").length;
//als er meer dan 0 zichtbaar zijn dan moet de tekst dat er niks is gevonden niet te zijn zijn anders wel
if(aantalzichtbaar > 0){
$('#niets').hide();
}else{
$('#niets').show();
const niets = document.querySelector(".niets");
niets.classList.toggle("notfound");
}

});

});

dus je wilt die span met id=niets ook de class notfound meegeven in combinatie met show()?

$('#niets').removeClass('notfound').hide();
$('#niets').addClass('notfound').show();

Hm, doe dan in CSS iets van:

#niets{
  display: none;
}
#niets.notfound{
  display: block;
}

Kun je die hide/show weg laten en verplaats je het "probleem" verder volledig naar de CSS (persoonlijk vindt ik dat altijd de mooiste oplossing; als je dan wat aan je "look & feel" wilt veranderen hoef je geen code aan te passen).

Ahh dat was mijn plan ja maar deed het een beetje op een domme manier. Dankuwel!