J'ai des problèmes avec le code suivant. et j'ai une zone de recherche simple: p> Il est possible de masquer des éléments par ID lorsque l'utilisateur démarre entré? P>
Je peuplage une page Web avec des éléments d'un tableau: $( document ).ready(function() {
$("#filter").keyup(function() {
each element in webpage
if div id contains userinput
keepelement
else
hideit
3 Réponses :
Voici un code de travail. Vous feriez mieux d'utiliser la fonction de porte-clés.
dans l'événement KeyPress sur #filter div, il iTère div avec la classe .column et vérifie si son identifiant contient une valeur de filtre DIV. S'il contient, il sera masqué et d'autres seront montrés. P>
<input class="form-input" id="filter" type="text" placeholder="filter"/>
<?php
$a = array("Volvo", "BMW", "Toyota");
foreach ($a as $item) {
echo '<div class="column col-3" id="' . $item . '" >' . $item . '</div>';
}
?>
<script>
$(function () {
$("#filter").keypress(function (e) {
const val = e.target.value;
$('div.column').each(function (ind, ele) {
if (ele.id.includes(val)) {
$(ele).hide();
} else {
$(ele).show();
}
});
});
});
</script>
Qu'est ce que ça fait? Comment ça marche? Une bonne réponse inclut une explication appropriée et détaillée, pas seulement un morceau de code. Et IMHO, l'OP devrait montrer des efforts avant de répondre, sinon sera simplement un service de codage libre.
Pourquoi ne pas utiliser l'entrée? i.e $ ('# filtre'). Entrée (fonction () Il semble mieux que KeyPress
$('#filter').keyup(function(){
$('div').each(function(){
var str = $(this).attr('id').toLowerCase();
if(str.indexOf($('#filter').val().toLowerCase())){
$(this).removeClass('d-none');
}
else{
$(this).addClass('d-none');
}
});
});
just use this code. This is for all div tags in html. if you want just for .column classed div's use $('div.column')
IMHO, l'OP devrait faire preuve d'effort avant de répondre, sinon sera simplement un service de codage libre.
Essayez comme ça -
<input class="form-input" id="filter" type="text" placeholder="filter"/>
<?php
$a = array("Volvo", "BMW", "Toyota");
foreach ($a as $item) {
echo '<div class="column col-3" id="' . $item . '" >' . $item . '</div>';
}
?>
<script>
$(function () {
$("#filter").keypress(function (e) {
const val = e.target.value;
$('div.column').each(function (ind, ele) {
if (ele.id.includes(val)) {
$(ele).hide();
} else {
$(ele).show();
}
});
});
});
</script>
Pourquoi devraient-ils l'essayer? Qu'est ce que ça fait? Comment ça marche? Une bonne réponse inclut une explication appropriée et détaillée, pas seulement un morceau de code. Et IMHO, l'OP devrait montrer des efforts avant de répondre, sinon sera simplement un service de codage libre.
Veuillez partager votre page HTML et votre code JavaScript.
Si vous avez du code pseudo, pourquoi ne faites-vous pas de recherche sur la convertir en un code réel au lieu de simplement nous demander de faire votre travail pour vous? Si vous faites cela et rencontrez un problème spécifique en cours de route, nous pouvons vous aider avec cela. Mais ne nous demandez pas de vous demander de le résoudre pour vous sans montrer de type d'effort.