How to Create a Search Bar in a basic JavaScript Application
Using a search bar to filter through data is a useful tool to make your simple application a little more sophisticated. Using cards to display content is very popular due to its sleek functionality among both beginner programmers and the most well known applications, like Instagram, Youtube, and Netflix. Although there are hundreds of ways to filter through and access data, a basic search bar is the most standard.
For my application, I used Ruby on Rails with seeded data for the backend and vanilla Javascript on the front end. After fetching data from the backend and creating cards based on the content I wanted to display, I implemented a search bar to be able to filter through the displayed information. Keep in mind, there are numerous ways you can accomplish a search, this is just what worked best for my skill set and application.
To start, I created a form in my HTML folder. I put the input field within a “search box” div for styling purposes. Within the input tag, I included the type attribute and set it equal to “text”. Text is the default type attribute so it is not required, but it is more semantic to include it. I gave the input a class to easily access it in Javascript and CSS. The name attribute references the form data after the form is submitted. In my case, name refers to the name of the mountain from the backend. Placeholders are a clean way to specify what your user is able to search for. They are also not required. Lastly, I added a submit button which enables your search to be submitted.
<form>
<div class=”search-box”>
<input type=”text” class=”search-by-name” name=”name” placeholder=”Search Fourteeners by Name”>
<button class=”search-btn” type=”submit”>Search</button>
</div>
</form>After making a fetch request to my backend and passing that data into the createMountainCards function, I created a variable nameForm and set it equal to the search box from my HTML (using querySelector). I set another variable, filteredMountains, equal to an empty array. Within the fetch request, filteredMountains is set equal to mountains, so that the data inside the empty array can be passed into the createMountainCards function as an argument, so that our new content can be rendered on the page.
fetch('http://localhost:3000/mountains/')
.then(response => response.json())
.then(mountains => { createMountainCards(mountains)
filteredMountains = mountains})const nameForm = document.querySelector('.search-box')
let filteredMountains = []
Next, I attached the addEventListener method to my nameForm (remember this is my search box in my HTML). Event Listeners take two arguments, the type of event, and a function. Forms have a default behavior to refresh the page every time they get submitted, which would negate the behavior we are trying to obtain. We can prevent this by adding the preventDefault method to the event function. Next, I created a variable term and set it equal to the event.target.value (which is what the user is typing into the input field) and also added a toLowerCase method so that capitalization doesn’t affect the search results. I then created another variable, searchResult, which is equal to the result of filtering through the mountains and finding the mountain(s) that include the letters (term) of the input field. I then passed the searchResult into the createMountainCard function and Viola! We see the results of the search on our page.
nameForm.addEventListener('input', event => {
event.preventDefault()
const term = event.target.value.toLowerCase()
let searchResult = filteredMountains.filter(filteredMountain => {
return filteredMountain.name.toLowerCase().includes(term)
})createMountainCards(searchResult)})
