In the following example code I want to hide the elements that show under the search field. Code is from W3: https://www.w3schools.com/howto/howto_js_filter_lists.asp Search elements should only show when users starts typing in the search field. Nothing complex just looking for solution for beginner. Thanks
JavaScript
x
82
82
1
<!DOCTYPE html>2
<html>3
<head>4
<meta name="viewport" content="width=device-width, initial-scale=1">5
<style>6
* {7
box-sizing: border-box;8
}9
10
#myInput {11
background-image: url('/css/searchicon.png');12
background-position: 10px 12px;13
background-repeat: no-repeat;14
width: 100%;15
font-size: 16px;16
padding: 12px 20px 12px 40px;17
border: 1px solid #ddd;18
margin-bottom: 12px;19
}20
21
#myUL {22
list-style-type: none;23
padding: 0;24
margin: 0;25
}26
27
#myUL li a {28
border: 1px solid #ddd;29
margin-top: -1px; /* Prevent double borders */30
background-color: #f6f6f6;31
padding: 12px;32
text-decoration: none;33
font-size: 18px;34
color: black;35
display: block36
}37
38
#myUL li a:hover:not(.header) {39
background-color: #eee;40
}41
</style>42
</head>43
<body>44
45
<h2>My Phonebook</h2>46
47
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">48
49
<ul id="myUL">50
<li><a href="#">Adele</a></li>51
<li><a href="#">Agnes</a></li>52
53
<li><a href="#">Billy</a></li>54
<li><a href="#">Bob</a></li>55
56
<li><a href="#">Calvin</a></li>57
<li><a href="#">Christina</a></li>58
<li><a href="#">Cindy</a></li>59
</ul>60
61
<script>62
function myFunction() {63
var input, filter, ul, li, a, i, txtValue;64
input = document.getElementById("myInput");65
filter = input.value.toUpperCase();66
ul = document.getElementById("myUL");67
li = ul.getElementsByTagName("li");68
for (i = 0; i < li.length; i++) {69
a = li[i].getElementsByTagName("a")[0];70
txtValue = a.textContent || a.innerText;71
if (txtValue.toUpperCase().indexOf(filter) > -1) {72
li[i].style.display = "";73
} else {74
li[i].style.display = "none";75
}76
}77
}78
</script>79
80
</body>81
</html>82
Advertisement
Answer
Just set display: none to #myUL li
JavaScript
1
4
1
#myUL li {2
display: none;3
}4
and change in your js add li[i].style.display = "block"
JavaScript
1
6
1
if (txtValue.toUpperCase().indexOf(filter) > -1) {2
li[i].style.display = "block";3
} else {4
li[i].style.display = "none";5
}6
Working Example
JavaScript
1
16
16
1
function myFunction() {2
var input, filter, ul, li, a, i, txtValue;3
input = document.getElementById("myInput");4
filter = input.value.toUpperCase();5
ul = document.getElementById("myUL");6
li = ul.getElementsByTagName("li");7
for (i = 0; i < li.length; i++) {8
a = li[i].getElementsByTagName("a")[0];9
txtValue = a.textContent || a.innerText;10
if (txtValue.toUpperCase().indexOf(filter) > -1) {11
li[i].style.display = "block";12
} else {13
li[i].style.display = "none";14
}15
}16
}JavaScript
1
40
40
1
* {2
box-sizing: border-box;3
}4
5
#myInput {6
background-image: url('/css/searchicon.png');7
background-position: 10px 12px;8
background-repeat: no-repeat;9
width: 100%;10
font-size: 16px;11
padding: 12px 20px 12px 40px;12
border: 1px solid #ddd;13
margin-bottom: 12px;14
}15
16
#myUL {17
list-style-type: none;18
padding: 0;19
margin: 0;20
}21
22
#myUL li {23
display: none24
}25
26
#myUL li a {27
border: 1px solid #ddd;28
margin-top: -1px;29
/* Prevent double borders */30
background-color: #f6f6f6;31
padding: 12px;32
text-decoration: none;33
font-size: 18px;34
color: black;35
display: block36
}37
38
#myUL li a:hover:not(.header) {39
background-color: #eee;40
}JavaScript
1
15
15
1
<h2>My Phonebook</h2>2
3
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">4
5
<ul id="myUL">6
<li><a href="#">Adele</a></li>7
<li><a href="#">Agnes</a></li>8
9
<li><a href="#">Billy</a></li>10
<li><a href="#">Bob</a></li>11
12
<li><a href="#">Calvin</a></li>13
<li><a href="#">Christina</a></li>14
<li><a href="#">Cindy</a></li>15
</ul>My approach would be different for making this search bar
JavaScript
1
18
18
1
const input = document.querySelector("input");2
const listItems = document.querySelectorAll(".list-item");3
4
input.addEventListener("input", (event) => {5
const value = event.target.value;6
7
listItems.forEach((listItem) => {8
const target =9
value.trim().length > 0 &&10
listItem.innerText.toLowerCase().includes(value);11
12
if (target === true) {13
listItem.style.display = "block";14
} else {15
listItem.style.display = "none";16
}17
});18
});JavaScript
1
40
40
1
@import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";2
body {3
height: 100%;4
display: grid;5
place-items: center;6
}7
8
.container {9
--space: 4px;10
--border-color: #e1e1e1;11
width: 100%;12
display: flex;13
max-width: 480px;14
flex-direction: column;15
row-gap: calc(var(--space) * 2);16
}17
18
.container input {19
border: 0;20
padding: calc(var(--space) * 4);21
box-shadow: inset 0 0 0 1px var(--border-color);22
transition: box-shadow 125ms ease;23
}24
25
.container input:focus {26
--border-color: #2e86c1;27
}28
29
.container ul {30
display: inherit;31
row-gap: var(--space);32
flex-direction: inherit;33
}34
35
.container ul .list-item {36
display: none;37
text-transform: capitalize;38
padding: calc(var(--space) * 4);39
box-shadow: inset 0 0 0 1px var(--border-color);40
}JavaScript
1
12
12
1
<div class="container">2
<input type="text" placeholder="Search for names" />3
<ul>4
<li class="list-item">adele</li>5
<li class="list-item">agnes</li>6
<li class="list-item">billy</li>7
<li class="list-item">bob</li>8
<li class="list-item">calvin</li>9
<li class="list-item">christina</li>10
<li class="list-item">cindy</li>11
</ul>12
</div>Now in my approach if your input is empty no list-item is visible.