How to Code a Search Bar

The following steps will highlight the importance of working with input DOM elements.

Process of events that make a Search Bar Work:

  1. First, we need to assemble the text box info in order to retrieve the corresponding id we will use later. I built out a a header tag for my text, a div tag, input tag and button tag in my index.html file but you can also build it out in your JS file. I will be using the button tag to hook up to my search function later on. After this step, we can go back and get some confirmation on our DOM that the search bar was added correctly.
  2. 2. We need to set up an initial global variable in the pullFromDb function, so I can have access to all the listing objects that were fetched and their attributes. I did so by declaring listingsArray = listings.
  3. Next, we need a way to select the input search bar id from the text box html code. In JS, we can easily reference the id of a node by using document.getElementById( ). I declared the searchRequest variable and set it equal to the value of the “search-bar” id. Now we can easily grab it for later use. I also declared displaySearch, selecting the “search-result” id from my div tag, for later use.
  4. Then I used and called the find method on my listingsArray to query through the listing objects and used the == operator to check if the attributes called on the object were equivalent to what the user typed into the text box. Here we are using a check functionality to match what objects you have in the database vs what the user input. I also made sure to utilize the toLowerCase() method to create a case insensitive search because without it then the the user can try to type in all lowercase letters and not receive a search back. I also added the or || operators between each of my attribute calls on the listing object to include all of the attributes for each listing.
  5. Set up an if else conditional including displaying all the HTML I want to display when my user queries their responses in the search box. Here I have a template literal in the backticks. I also utilized JS interpolation by using the ${ } and calling the attributes on myCollection variable. I wanted to make some feature in the else statement that would reference the “search-result” node and add some type of alert via the innerHTML method to let the user know that their search was not successful. As of now, my search bar feature can only take in the exact wording of a business name or ad name and give back one listing due to my limitations of using the find method which only gives you one hit back. On the other hand, the JS .filter(callback function) method could help give you back all the corresponding results that match your search.
  6. Lastly, I added the onClick JS method on the search button to have the function triggered by the click event when the user clicks the button only then is the function triggered. But you could have also used .addEventListener on a specific element/node that takes in 2 arguments. First it specifies the event name you are listening for an event for and secondly you add the callback function. Now when you type an ad name/business name into the search bar and hit the Search button, the corresponding listing object asynchronously pops up without a page refresh thanks to onClick.