-
Notifications
You must be signed in to change notification settings - Fork 16
Expand file tree
/
Copy pathDynamic Search Filter
More file actions
34 lines (34 loc) · 851 Bytes
/
Dynamic Search Filter
File metadata and controls
34 lines (34 loc) · 851 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- Objective: Create a dynamic search filter for a list of items. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Search Filter</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="Search...">
<ul id="itemList">
<li>Apple</li>
<li>Banana</li>
<li>Carrot</li>
<li>Date</li>
<li>Elderberry</li>
</ul>
<script>
const searchInput = document.getElementById('searchInput');
const itemList = document.getElementById('itemList');
const items = itemList.querySelectorAll('li');
searchInput.addEventListener('keyup', function() {
const searchValue = searchInput.value.toLowerCase();
items.forEach(item => {
const text = item.textContent.toLowerCase();
if (text.includes(searchValue)) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
});
</script>
</body>
</html>