Do you have a website and want to add a search bar to it? There are various ways to do it, one of them is to add google search to a website and the other is to use a plain vanilla javascript. 

Javascript is a programming language that is used on the client and the server to make the web pages more interactive. Unlike HTML and CSS which are more useful for making the appearance better, Javascript helps to engage a user. Some of the examples of a Javacriot are adding a search box, embedding a video, providing access to social media through the site, and more. Having Javascript included in the webpage enhances the UI experience and converts a static page into an interactive dynamic one. 

Javascript is used to build web-based applications, web browsers, websites for businesses, developing server applications, creating games, etc. The major advantage of this for web developers is that it is easy to learn and quick to implement. 

One of the common uses of the internet is searching the web. So if you have a website then it is imperative to have a search bar to search for content in it. Read below to learn how to add a search bar using javascript. 

Create an HTML form in the HTML folder. Add the ‘search box’ div. In the input, tag include the attribute and set ‘text’ as the default. Give the input a class so that it can be accessed either by Javascript. The name attribute is used to reference the form data after it is submitted. Also, use a ‘submit’ button to allow the user to search for the string entered in the box. It looks something like this:

<form>

 <div class=”search-box”>

   <input type=”text” class=”search-by-name” name=”name”>

   <button class=”search-btn” type=”submit”>Search</button>

  </div>

</form>

The foremost thing to know about using Javascript to incorporate a search bar is to retrieve input from the text box. To do this we should use the getElementId() method. This returns an Element object whose Id matches the specified string. The element Ids should be unique and are a good way to get access to the specific element. 

The following line should be added to the JavaScript file document.getElementBy Id(‘SearchBar’). This will set up the reference to the search bar. Now an event listener has to be added to get the user input. An arrow function is used here for the callback along with the Keyup event listener. Assign this to a variable using the below

searchBar. addEventListener (“keyup”, e)

Use the console.log function to check if the output you are getting is right. 

To filter the search results that you have obtained, the filter() method has to be used. This allows iterating through the array and deciding whether it should be shown based on the search string. A sample code is:

Const filteredCharacters = x.filter ()

return true;

Instead of returning true, it can be used to include the searchString to get the desired results. To display the result use the displayCharacters() function. The code can then be tweaked to search for strings which is case insensitive too. 

This is how to use a Javascript search bar in your HTML forms, it can also be used to filter the search results.