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 one card contains “docker” in the title and the other card contains “docx” in the title, and I’d type 'do' it would show both but when I type ‘doc’, the docx card gets removed and it only shows the docker card.
Here I show only two cards, but in the project there are more of them:
JavaScript
x
14
14
1
function search_tool(el) {2
const cards = document.querySelectorAll('.cards .card')3
for (let card of cards) {4
const texts_to_search_for = card.querySelectorAll('.card-title-left a, .card .keywords > span')5
6
texts_to_search_for.forEach(txt => {7
if (txt.innerText.toUpperCase().indexOf(el.value.toUpperCase()) > -1) {8
card.style.display = ''9
} else {10
card.style.display = 'none'11
}12
})13
}14
}JavaScript
1
32
32
1
<div class="cards">2
<div class="card">3
<div class="card-title">4
<div class="card-title-left">5
<a href="Card path">Card Title</a>6
<i class="fa-solid fa-heart"></i>7
</div>8
</div>9
<div class="keywords">10
<span>keyword1</span>11
<span>keyword2</span>12
<span>keyword3</span>13
<span>keyword4</span>14
<span>keyword5</span>15
</div>16
</div>17
<div class="card">18
<div class="card-title">19
<div class="card-title-left">20
<a href="Card path">Card 2</a>21
<i class="fa-solid fa-heart"></i>22
</div>23
</div>24
<div class="keywords">25
<span>keyword1</span>26
<span>keyword2</span>27
<span>keyword3</span>28
<span>keyword4</span>29
<span>keyword5</span>30
</div>31
</div>32
</div>It runs every time we type something in the input. el parameter is the input element.
I wanted to know if there’s something I could do to make it work while having this code or do I need to remove the code completely.
Thank you in advance.
Advertisement
Answer
The problem seems to be:
JavaScript
1
16
16
1
texts_to_search_for.forEach(2
(txt) => {3
if () {4
// if there is a match on one iteration the5
// the card will be shown (supplying an6
// invalid display property-value causes the7
// display property to be unset/removed):8
card.style.display = ''9
} else {10
// any subsequent iteration in which does not11
// satisfy the `if` condition will then hide12
// the whole card:13
card.style.display = 'none'14
}15
});16
I’d suggest rewriting to use Array methods, as follows – with explanatory comments in the code – specifically using Array.prototype.some():
JavaScript
1
38
38
1
// defining the search_tool function with an Arrow expression, passing the Event Object from2
// EventTarget.addEventListener() to the function body:3
const search_tool = (evt) => {4
// retrieving all the .card elements:5
const cards = document.querySelectorAll('.cards .card'),6
// retrieving the input value here, once, for comparison, removing leading/trailing7
// white-space and converting to upper-case:8
value = evt.currentTarget.value.trim().toUpperCase();9
10
// iterating over the cards:11
for (let card of cards) {12
// using an Array literal, with the spread operator, to convert the13
// iterable NodeList into an Array:14
const texts_to_search_for = [card.querySelectorAll('.card-title-left a, .card .keywords > span')];15
16
// Array.prototype.some() takes the supplied array-element and returns a Boolean if any element17
// of that Array returns a true value for the supplied test:18
if (texts_to_search_for.some(19
// here we pass in a reference to the Array-element ('txt') to the function body,20
// we find the element's textContent, convert that text to upper-case using21
// String.prototype.toUpperCase(), and then we test to see if that String22
// includes the string contained in the variable of 'value', using23
// String.prototype.includes():24
(txt) => txt.textContent.toUpperCase().includes(value)25
)) {26
// if any of the element node's text-content contains the 'value' String27
// we unset the display property:28
card.style.display = '';29
} else {30
// otherwise we set the display to 'none':31
card.style.display = 'none';32
}33
}34
}35
36
// here we use EventTarget.addEventListener() to bind the search_tool() function (note the deliberate37
// lack of parentheses) as the event-handler for the 'input' event:38
document.querySelector('.search input').addEventListener('input', search_tool);JavaScript
1
43
43
1
*, ::before,::after {2
box-sizing: border-box;3
font-family: system-ui;4
font-size: 16px;5
margin: 0;6
padding: 0;7
}8
9
main {10
display: grid;11
gap: 1em;12
inline-size: clamp(15em, 70vw, 1000px);13
margin-block: 1em;14
margin-inline: auto;15
}16
17
.cards {18
display: flex;19
flex-flow: row wrap;20
gap: 1em;21
}22
23
.card {24
border: 1px solid #000;25
border-radius: 1em;26
flex-basis: 30%;27
flex-grow: 1;28
padding: 0.5em;29
}30
31
.keywords {32
display: flex;33
flex-basis: fit-content;34
flex-flow: row wrap;35
flex-grow: 1;36
gap: 0.5em;37
}38
39
.keywords span {40
border: 1px solid #000;41
border-radius: 0.5em;42
padding: 0.25em;43
}JavaScript
1
130
130
1
<main>2
<div class="search">3
<label>4
<span class="labelText">Search:</span>5
<input type="text">6
</label>7
</div>8
<div class="cards">9
<div class="card">10
<div class="card-title">11
<div class="card-title-left">12
<a href="Card path">Card 1</a>13
<i class="fa-solid fa-heart"></i>14
</div>15
</div>16
<div class="keywords">17
<span>odio laborum</span>18
<span>dignissimos sint</span>19
<span>iusto error</span>20
<span>aliquid eligendi</span>21
<span>sit mollitia</span>22
</div>23
</div>24
<div class="card">25
<div class="card-title">26
<div class="card-title-left">27
<a href="Card path">Card 2</a>28
<i class="fa-solid fa-heart"></i>29
</div>30
</div>31
<div class="keywords">32
<span>sint id</span>33
<span>vitae mollitia</span>34
<span>sit amet,</span>35
<span>dignissimos Deserunt</span>36
<span>laborum eligendi</span>37
</div>38
</div>39
<div class="card">40
<div class="card-title">41
<div class="card-title-left">42
<a href="Card path">Card 3</a>43
<i class="fa-solid fa-heart"></i>44
</div>45
</div>46
<div class="keywords">47
<span>esse adipisicing</span>48
<span>Tempore laborum</span>49
<span>quia elit</span>50
<span>eligendi amet,</span>51
<span>doloribus doloribus</span>52
</div>53
</div>54
<div class="card">55
<div class="card-title">56
<div class="card-title-left">57
<a href="Card path">Card 4</a>58
<i class="fa-solid fa-heart"></i>59
</div>60
</div>61
<div class="keywords">62
<span>Lorem aliquid</span>63
<span>eligendi deleniti</span>64
<span>dignissimos error</span>65
<span>iste Lorem</span>66
<span>Deserunt aliquid</span>67
</div>68
</div>69
<div class="card">70
<div class="card-title">71
<div class="card-title-left">72
<a href="Card path">Card 5</a>73
<i class="fa-solid fa-heart"></i>74
</div>75
</div>76
<div class="keywords">77
<span>Deserunt minus</span>78
<span>odio minus</span>79
<span>Tempore explicabo</span>80
<span>Deserunt amet,</span>81
<span>deleniti amet,</span>82
</div>83
</div>84
<div class="card">85
<div class="card-title">86
<div class="card-title-left">87
<a href="Card path">Card 6</a>88
<i class="fa-solid fa-heart"></i>89
</div>90
</div>91
<div class="keywords">92
<span>Deserunt dolor</span>93
<span>quia odio</span>94
<span>esse esse</span>95
<span>odio vel</span>96
<span>sint explicabo</span>97
</div>98
</div>99
<div class="card">100
<div class="card-title">101
<div class="card-title-left">102
<a href="Card path">Card 7</a>103
<i class="fa-solid fa-heart"></i>104
</div>105
</div>106
<div class="keywords">107
<span>doloribus error</span>108
<span>mollitia sint</span>109
<span>Tempore aliquid</span>110
<span>amet, vitae</span>111
<span>amet, explicabo</span>112
</div>113
</div>114
<div class="card">115
<div class="card-title">116
<div class="card-title-left">117
<a href="Card path">Card 8</a>118
<i class="fa-solid fa-heart"></i>119
</div>120
</div>121
<div class="keywords">122
<span>eligendi dignissimos</span>123
<span>error minus</span>124
<span>dignissimos mollitia</span>125
<span>Tempore amet,</span>126
<span>veritatis iusto</span>127
</div>128
</div>129
</div>130
</main>However, I would personally rewrite the above to the following, with explanatory comments in the code:
JavaScript
1
43
43
1
// defining the search_tool function with an Arrow expression, passing the Event Object from2
// EventTarget.addEventListener() to the function body:3
const search_tool = (evt) => {4
// retrieving all the .card elements:5
const cards = document.querySelectorAll('.cards .card'),6
// retrieving the input value here, once, for comparison, removing leading/trailing7
// white-space and converting to upper-case:8
value = evt.currentTarget.value.trim().toUpperCase();9
10
// iterating over the NodeList of .card elements:11
cards.forEach(12
// using an Arrow function, and passing a reference to the13
// current Array-element into the function body:14
(el)=>15
// here we use the HTMLElement.hidden property to determine whether to hide,16
// or show, each ,card element in turn.17
// first we convert the iterable result of Element.querySelectorAll() into18
// an Array, using the spread operator with an Array literal, and then19
// call Array.prototype.map() to create a new Array based on the first Array.20
// When the final Array is passed to Array.prototype.some(), that method21
// will return a Boolean, which we then invert using the NOT operator22
// (because assigning true will hide the element, and we want to show the23
// elements that include the value we're looking for and hide those24
// that don't):25
el.hidden = ![el.querySelectorAll('a, span')].map(26
// here we trim the text-content of the elenebt, and convert it to27
// uppercase:28
(el) => el.textContent.trim().toUpperCase()29
// we then use Array.prototype.some() to return a Boolean result based30
// on the Array-elements:31
).some(32
// here, if the current String includes the input-value, we return33
// true; if that value is not contained this test returns false;34
// if any array-element (String) includes the value then Array.prototype.some()35
// returns true:36
(string) => string.includes(value)37
)38
)39
}40
41
// here we use EventTarget.addEventListener() to bind the search_tool() function (note the deliberate42
// lack of parentheses) as the event-handler for the 'input' event:43
document.querySelector('.search input').addEventListener('input', search_tool);JavaScript
1
45
45
1
*,2
::before,3
::after {4
box-sizing: border-box;5
font-family: system-ui;6
font-size: 16px;7
margin: 0;8
padding: 0;9
}10
11
main {12
display: grid;13
gap: 1em;14
inline-size: clamp(15em, 70vw, 1000px);15
margin-block: 1em;16
margin-inline: auto;17
}18
19
.cards {20
display: flex;21
flex-flow: row wrap;22
gap: 1em;23
}24
25
.card {26
border: 1px solid #000;27
border-radius: 1em;28
flex-basis: 30%;29
flex-grow: 1;30
padding: 0.5em;31
}32
33
.keywords {34
display: flex;35
flex-basis: fit-content;36
flex-flow: row wrap;37
flex-grow: 1;38
gap: 0.5em;39
}40
41
.keywords span {42
border: 1px solid #000;43
border-radius: 0.5em;44
padding: 0.25em;45
}JavaScript
1
130
130
1
<main>2
<div class="search">3
<label>4
<span class="labelText">Search:</span>5
<input type="text">6
</label>7
</div>8
<div class="cards">9
<div class="card">10
<div class="card-title">11
<div class="card-title-left">12
<a href="Card path">Card 1</a>13
<i class="fa-solid fa-heart"></i>14
</div>15
</div>16
<div class="keywords">17
<span>odio laborum</span>18
<span>dignissimos sint</span>19
<span>iusto error</span>20
<span>aliquid eligendi</span>21
<span>sit mollitia</span>22
</div>23
</div>24
<div class="card">25
<div class="card-title">26
<div class="card-title-left">27
<a href="Card path">Card 2</a>28
<i class="fa-solid fa-heart"></i>29
</div>30
</div>31
<div class="keywords">32
<span>sint id</span>33
<span>vitae mollitia</span>34
<span>sit amet,</span>35
<span>dignissimos Deserunt</span>36
<span>laborum eligendi</span>37
</div>38
</div>39
<div class="card">40
<div class="card-title">41
<div class="card-title-left">42
<a href="Card path">Card 3</a>43
<i class="fa-solid fa-heart"></i>44
</div>45
</div>46
<div class="keywords">47
<span>esse adipisicing</span>48
<span>Tempore laborum</span>49
<span>quia elit</span>50
<span>eligendi amet,</span>51
<span>doloribus doloribus</span>52
</div>53
</div>54
<div class="card">55
<div class="card-title">56
<div class="card-title-left">57
<a href="Card path">Card 4</a>58
<i class="fa-solid fa-heart"></i>59
</div>60
</div>61
<div class="keywords">62
<span>Lorem aliquid</span>63
<span>eligendi deleniti</span>64
<span>dignissimos error</span>65
<span>iste Lorem</span>66
<span>Deserunt aliquid</span>67
</div>68
</div>69
<div class="card">70
<div class="card-title">71
<div class="card-title-left">72
<a href="Card path">Card 5</a>73
<i class="fa-solid fa-heart"></i>74
</div>75
</div>76
<div class="keywords">77
<span>Deserunt minus</span>78
<span>odio minus</span>79
<span>Tempore explicabo</span>80
<span>Deserunt amet,</span>81
<span>deleniti amet,</span>82
</div>83
</div>84
<div class="card">85
<div class="card-title">86
<div class="card-title-left">87
<a href="Card path">Card 6</a>88
<i class="fa-solid fa-heart"></i>89
</div>90
</div>91
<div class="keywords">92
<span>Deserunt dolor</span>93
<span>quia odio</span>94
<span>esse esse</span>95
<span>odio vel</span>96
<span>sint explicabo</span>97
</div>98
</div>99
<div class="card">100
<div class="card-title">101
<div class="card-title-left">102
<a href="Card path">Card 7</a>103
<i class="fa-solid fa-heart"></i>104
</div>105
</div>106
<div class="keywords">107
<span>doloribus error</span>108
<span>mollitia sint</span>109
<span>Tempore aliquid</span>110
<span>amet, vitae</span>111
<span>amet, explicabo</span>112
</div>113
</div>114
<div class="card">115
<div class="card-title">116
<div class="card-title-left">117
<a href="Card path">Card 8</a>118
<i class="fa-solid fa-heart"></i>119
</div>120
</div>121
<div class="keywords">122
<span>eligendi dignissimos</span>123
<span>error minus</span>124
<span>dignissimos mollitia</span>125
<span>Tempore amet,</span>126
<span>veritatis iusto</span>127
</div>128
</div>129
</div>130
</main>References:
- Array literals.
Array.prototype.forEach().Array.prototype.map().Array.prototype.some().- Arrow functions.
document.querySelector().document.querySelectorAll().Element.querySelector().Element.querySelectorAll().- Spread operator.
String.prototype.includes().String.prototype.toUpperCase().String.prototype.trim().