Je travaille sur le code ci-dessous. J'essaie de filtrer et d'obtenir l'index et la valeur de l'élément items qui contient une chaîne d'entrée similaire, mais cela ne fonctionne pas.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" />
<span id="filter-count"></span>
</fieldset>
</form>
var items =[ {item:"Saab", sku:"SA"},
{item:"Volvo", sku:"VO"},
{item:"BMW", sku:"BM"},
{item:"Toyota", sku:"TO"},
{item:"Honda", sku:"HO"},
{item:"Nissan", sku:"NI"},
];
$("#filter").keyup(function () {
var filter = $(this).val();
$(items['item']).each(function (index, value) {
if (value.search(new RegExp(filter, "i")) < 0) {
// Do somethign
} else {
console.log(index);
console.log(value);
}
});
});
4 Réponses :
Vous ne pouvez pas utiliser jquery chacun comme celui-ci, changez-le en carte comme
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" />
<span id="filter-count"></span>
</fieldset>
</form>
var items =[ {item:"Saab", sku:"SA"},
{item:"Volvo", sku:"VO"},
{item:"BMW", sku:"BM"},
{item:"Toyota", sku:"TO"},
{item:"Honda", sku:"HO"},
{item:"Nissan", sku:"NI"},
];
$("#filter").keyup(function () {
var filter = $(this).val();
console.log(filter);
items.map(function (value, index) {
if (value.item.indexOf(filter) < 0) {
// Do somethign
} else {
console.log(index);
console.log(value.item + "-" + value.sku);
}
});
});
items.map(function (value, index) {
if (value.item.indexOf(filter) < 0) {
// Do somethign
} else {
console.log(index);
console.log(value);
}
});
Merci un Hien perdu, mais puis-je aussi me dire comment je peux obtenir le sku de chaque article?
Vous devrez peut-être saisir des éléments en tant que variable javascript standard mais pas en tant que sélecteur jquery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" />
<span id="filter-count"></span>
</fieldset>
</form>
var items = [
{ item: "Saab", sku: "SA" },
{ item: "Volvo", sku: "VO" },
{ item: "BMW", sku: "BM" },
{ item: "Toyota", sku: "TO" },
{ item: "Honda", sku: "HO" },
{ item: "Nissan", sku: "NI" },
];
$("#filter").keyup(function() {
var filter = $(this).val();
items.forEach(function(item, index) {
var value = item.item // Honda, Nissan
var sku = item.sku // HO, NI
if (filter !== '' && new RegExp(filter, "i").test(value)) {
// Do somethign when matched
console.info(index, value, sku)
} else {
// console.log(index);
// console.log(value);
}
});
});
Merci Priya mais qu'en est-il du SKU?
var value = item.item // Honda, Nissan , de la même manière var sku = item.sku // HO, NI dans forEach
Je ne veux pas rechercher dans SKU, je veux en fait rechercher un article et obtenir le SKU de cet article
lors de la correspondance, vous pouvez obtenir le sku, console.info (index, value, sku) , si vous ajoutez la ligne ci-dessus à partir de mon commentaire. Extrait mis à jour
Le problème ici est causé par l'utilisation du sélecteur jQuery pour sélectionner des éléments de tableau, qui ne fonctionnera pas pour Array ou Objects, cela ne fonctionnera que pour la sélection d'éléments DOM, voici comment vous pouvez le faire en utilisant jQuery:
p >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" />
<span id="filter-count"></span>
</fieldset>
</form>
var items = [
{ item: "Saab", sku: "SA" },
{ item: "Volvo", sku: "VO" },
{ item: "BMW", sku: "BM" },
{ item: "Toyota", sku: "TO" },
{ item: "Honda", sku: "HO" },
{ item: "Nissan", sku: "NI" },
];
$("#filter").keyup(function () {
var filter = $(this).val();
$.each(items, function (index, value) {
$.each(Object.keys(value), function (idx, val) {
if (val.search(new RegExp(filter, "i")) < 0) {
// Do somethign
} else {
console.log(index, idx);
console.log(value, val);
}
});
});
});
eh bien, le problème consiste en ce mauvais accès à la propriété du tableau:
items ['item'] qui se résout en non défini
En effet, la propriété item appartient aux objets contenus dans le tableau items et non au tableau lui-même.
Vous devez itérer sur la collection ( avec ou sans jQuery) et après l'accès et l'utilisation de la propriété sur chaque élément:
$("#filter").keyup(function () {
var filter = $(this).val();
if(items.find(item => item.item === filter)) {
console.log('found');
} else {
console.log('not found')
}
});
Si vous ne voulez pas utiliser jQuery pour boucler la collection:
$("#filter").keyup(function () {
var filter = $(this).val();
$(items).each(function (index, value) {
console.log('value:',value)
if (value.item.search(new RegExp(filter, "i")) < 0) {
//do something
} else {
console.log(index);
console.log(value);
}
});
});
$ (items ['item'])est problématique.itemsest un tableau, donc l'index est numérique, mais vous essayez d'utiliser une chaîne pour l'index. Cela ne rapportera rien. Deuxièmement,$ ()devrait recevoir une chaîne de sélection, donc même si vous lui donniez la propriété item sur l'un de vos objets, il ne retournerait pas de résultats, car ce ne sont pas des sélecteurs valides.