+ 1

JavaScript Specific Search Bar - SOLVED

So I'm trying to code a search bar for a glossary I'm making. It's got terms and their definitions. I want the search bar to search only the terms and then display relevant terms and definitions. I don't want it to search the definitions for the words. Anyone wanna help me with the js part? I have very little js knowledge. I'm using the dl element for my glossary with the dt and dd combined under a div if that helps at all.

html javascript display website filter search glossary

29th Apr 2024, 2:41 AM

Spare Dreamer

2 ответов

+ 4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glossary Search</title> </head> <body> <h2>Glossary</h2> <input type="text" id="searchInput" placeholder="Search terms"> <div id="glossary"> <dl> <div> <dt>Term 1</dt> <dd>Definition 1</dd> </div> <div> <dt>Term 2</dt> <dd>Definition 2</dd> </div>  </dl> </div> <script> document.getElementById('searchInput').addEventListener('input', function() { var searchTerm = this.value.toLowerCase(); var glossaryItems = document.querySelectorAll('#glossary dt'); glossaryItems.forEach(function(item) { var term = item.textContent.toLowerCase(); var parentDiv = item.parentElement; if (term.includes(searchTerm)) { parentDiv.style.display = 'block'; } else { parentDiv.style.display = 'none'; } }); }); </script> </body> </html>

1st May 2024, 1:03 PM

knara harutyunova