It should also have basic search features such as auto suggest, spell correct, search features, and more. If it can be done without any code adjustments, it makes the deal all the juicier. JavaScript search box is a search box that can be added by adding a simple search box and a div to any website. 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. I set another variable, filteredMountains, equal to an empty array. Search Īfter 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). Lastly, I added a submit button which enables your search to be submitted. Placeholders are a clean way to specify what your user is able to search for. In my case, name refers to the name of the mountain from the backend.

The name attribute references the form data after the form is submitted. I gave the input a class to easily access it in Javascript and CSS. Text is the default type attribute so it is not required, but it is more semantic to include it. Within the input tag, I included the type attribute and set it equal to “text”. I put the input field within a “search box” div for styling purposes. To start, I created a form in my HTML folder.

Keep in mind, there are numerous ways you can accomplish a search, this is just what worked best for my skill set and application. 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. Although there are hundreds of ways to filter through and access data, a basic search bar is the most standard.įor my application, I used Ruby on Rails with seeded data for the backend and vanilla Javascript on the front end. 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. Using a search bar to filter through data is a useful tool to make your simple application a little more sophisticated. This search bar enables users to search through different mountains by name.

Search js