Search Filter Javascript – Search for multiple texts inside a cards and

Question

I'm currently trying to make a dynamic search bar with JavaScript which can search inside cards, the title and multiple keywords. I currently have something but it doesn't seem to work properly. When I try searching for something even though the input value matches with the title or any of the keywords it still doesn't show it. For example, if

Accepted Answer

The problem seems to be:texts_to_search_for.forEach( (txt) => { if (...) { // if there is a match on one iteration the // the card will be shown (supplying an // invalid display property-value causes the // display property to be unset/removed): card.style.display = '' } else { // any subsequent iteration in which does not // satisfy the `if` condition will then hide // the whole card: card.style.display = 'none' }});I’d suggest rewriting to use Array methods, as follows – with explanatory comments in the code – specifically using Array.prototype.some(): // defining the search_tool function with an Arrow expression, passing the Event Object from// EventTarget.addEventListener() to the function body:const search_tool = (evt) => { // retrieving all the .card elements: const cards = document.querySelectorAll('.cards .card'), // retrieving the input value here, once, for comparison, removing leading/trailing // white-space and converting to upper-case: value = evt.currentTarget.value.trim().toUpperCase(); // iterating over the cards: for (let card of cards) { // using an Array literal, with the spread operator, to convert the // iterable NodeList into an Array: const texts_to_search_for = [...card.querySelectorAll('.card-title-left a, .card .keywords > span')]; // Array.prototype.some() takes the supplied array-element and returns a Boolean if any element // of that Array returns a true value for the supplied test: if (texts_to_search_for.some( // here we pass in a reference to the Array-element ('txt') to the function body, // we find the element's textContent, convert that text to upper-case using // String.prototype.toUpperCase(), and then we test to see if that String // includes the string contained in the variable of 'value', using // String.prototype.includes(): (txt) => txt.textContent.toUpperCase().includes(value) )) { // if any of the element node's text-content contains the 'value' String // we unset the display property: card.style.display = ''; } else { // otherwise we set the display to 'none': card.style.display = 'none'; } }}// here we use EventTarget.addEventListener() to bind the search_tool() function (note the deliberate// lack of parentheses) as the event-handler for the 'input' event:document.querySelector('.search input').addEventListener('input', search_tool); *, ::before,::after { box-sizing: border-box; font-family: system-ui; font-size: 16px; margin: 0; padding: 0;}main { display: grid; gap: 1em; inline-size: clamp(15em, 70vw, 1000px); margin-block: 1em; margin-inline: auto;}.cards { display: flex; flex-flow: row wrap; gap: 1em;}.card { border: 1px solid #000; border-radius: 1em; flex-basis: 30%; flex-grow: 1; padding: 0.5em;}.keywords { display: flex; flex-basis: fit-content; flex-flow: row wrap; flex-grow: 1; gap: 0.5em;}.keywords span { border: 1px solid #000; border-radius: 0.5em; padding: 0.25em;}

Search:

Card 1

odio laborum dignissimos sint iusto error aliquid eligendi sit mollitia

Card 2

sint id vitae mollitia sit amet, dignissimos Deserunt laborum eligendi

Card 3

esse adipisicing Tempore laborum quia elit eligendi amet, doloribus doloribus

Card 4

Lorem aliquid eligendi deleniti dignissimos error iste Lorem Deserunt aliquid

Card 5

Deserunt minus odio minus Tempore explicabo Deserunt amet, deleniti amet,

Card 6

Deserunt dolor quia odio esse esse odio vel sint explicabo

Card 7

doloribus error mollitia sint Tempore aliquid amet, vitae amet, explicabo

Card 8

eligendi dignissimos error minus dignissimos mollitia Tempore amet, veritatis iusto

JS Fiddle demo.However, I would personally rewrite the above to the following, with explanatory comments in the code: // defining the search_tool function with an Arrow expression, passing the Event Object from// EventTarget.addEventListener() to the function body:const search_tool = (evt) => { // retrieving all the .card elements: const cards = document.querySelectorAll('.cards .card'), // retrieving the input value here, once, for comparison, removing leading/trailing // white-space and converting to upper-case: value = evt.currentTarget.value.trim().toUpperCase(); // iterating over the NodeList of .card elements: cards.forEach( // using an Arrow function, and passing a reference to the // current Array-element into the function body: (el)=> // here we use the HTMLElement.hidden property to determine whether to hide, // or show, each ,card element in turn. // first we convert the iterable result of Element.querySelectorAll() into // an Array, using the spread operator with an Array literal, and then // call Array.prototype.map() to create a new Array based on the first Array. // When the final Array is passed to Array.prototype.some(), that method // will return a Boolean, which we then invert using the NOT operator // (because assigning true will hide the element, and we want to show the // elements that include the value we're looking for and hide those // that don't): el.hidden = ![...el.querySelectorAll('a, span')].map( // here we trim the text-content of the elenebt, and convert it to // uppercase: (el) => el.textContent.trim().toUpperCase() // we then use Array.prototype.some() to return a Boolean result based // on the Array-elements: ).some( // here, if the current String includes the input-value, we return // true; if that value is not contained this test returns false; // if any array-element (String) includes the value then Array.prototype.some() // returns true: (string) => string.includes(value) ) )}// here we use EventTarget.addEventListener() to bind the search_tool() function (note the deliberate// lack of parentheses) as the event-handler for the 'input' event:document.querySelector('.search input').addEventListener('input', search_tool); *,::before,::after { box-sizing: border-box; font-family: system-ui; font-size: 16px; margin: 0; padding: 0;}main { display: grid; gap: 1em; inline-size: clamp(15em, 70vw, 1000px); margin-block: 1em; margin-inline: auto;}.cards { display: flex; flex-flow: row wrap; gap: 1em;}.card { border: 1px solid #000; border-radius: 1em; flex-basis: 30%; flex-grow: 1; padding: 0.5em;}.keywords { display: flex; flex-basis: fit-content; flex-flow: row wrap; flex-grow: 1; gap: 0.5em;}.keywords span { border: 1px solid #000; border-radius: 0.5em; padding: 0.25em;}