Filter Producten
Op mijn site heb ik een producten lijst. Al de artikelen staat in een li en die staan weer in één ul( id is productList). Ook staat er bovenaan een input( id is productInput). Als er in de input een naam van een artikel wordt ingevuld wordt alleen het artikel getoond met die naam. Hieronder de javascript code:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$(document).ready(function(){
$("#productInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#productList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
$("#productInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#productList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Maar ik wil nu als er geen producten zijn met de naam die is ingevuld dat er tekst komt met "Geen producten met de ingevulde naam" of iets dergelijks. Zo iemand mij hiermee kunne helpen hoe ik dit kan bereiken?
,groetjes Sem
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(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();
}
});
});
$("#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
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<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
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.
Toevoeging op 29/05/2020 10:09:02:
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 (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(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");
}
});
});
$("#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");
}
});
});
Code (php)
1
2
2
$('#niets').removeClass('notfound').hide();
$('#niets').addClass('notfound').show();
$('#niets').addClass('notfound').show();
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#niets{
display: none;
}
#niets.notfound{
display: block;
}
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).