How To Create A Search Bar In JavaScript
Why Stack Overflow recommends it
Stack Overflow users link it when answering or following along with how to filter a list live from a search input, and when debugging code copied from the tutorial.
Recommended by 1 people across 1 different months, 2022 to 2022.
What it is
A 14-minute tutorial from Web Dev Simplified that builds a client-side search bar in plain JavaScript. It fetches users from the JSON Placeholder API, renders them with an HTML template tag, and filters them on each input event by toggling a CSS class.
What people said
Recommends Obsidianlab · 2022-04 · Stack Overflow · on “Search from list in React Native”
I suggest watching this video! I learned how to simply filter a list from this video. Its plain js but the idea is the same. [this video] If you look at the repo of that video it boils down to the following: searchInput.addEventListener("input", e => { const value = e.target.value.toLowerCase() users.forEach(user => { const isVisible = user.name.toLowerCase().includes(value) || user.email.toLowerCase().includes(value) user.element.classList.toggle("hide", !isVisible) }) }) Everytime the input changes (someone type something in the search field), the event listener is fired and converts the fields to lower case and compares it to the value your looking for. If the text contains the value it unhide
Cites Yftix · 2022-07 · Stack Overflow · on “Generating blog posts with html redirect via json backing file - javascript”
I follow this tutorial ( [this video] ) for using a search bar on my new blog and i apply the youtuber's advice and use his system of storing all my articles data into a json file. All work perfectly but i tried to add a json variable into the href of my articles, knowing that each of the href will be different, and it is impossible for me to make it work. I tried a whole bunch of solutions found on the internet but it was impossible for me to redirect to each of the different article pages using the generation method via template. The only way for me to achieve a redirect is to use this but the redirect only works on the first post : <script> var scrt_var = 10; document.getElementById("link").se
Cites VISHESH GUPTA · 2022-09 · Stack Overflow · on “how to get #document-fragment?”
I am trying to make a search bar type of thing , by seeing youtube video : [LINK] but got stuck don't know why the stack overflow is executing and getting the desired output but my pc doesnot what could be the reason ?? I want to get the output as : Output [LINK] but while I execute this code, I'm getting the error as : Uncaught (in promise) TypeError: Cannot read properties of null (reading 'content') at script.js:7:39 please help me const userCardTemplate = document.querySelector("[data-user-template]") fetch(" [LINK] ").then(res => res.json()).then(data => { const card = userCardTemplate.content.cloneNode(true).children[0] console.log(card) }) .search-wrapper{ display: flex; flex-directio