How to Update Search Results and URL in a Web Application

In this last lesson (lesson eight), we will put together all the components we have been working on so far. There are three main tasks that we need to accomplish:

1. Put the spinner back.
2. Show the actual search results.
3. Update the search results in the query parameter of the URL.

Let's start by working on the third task first, as that will help tie everything together.

Updating the Search Results URL

To update the search page URL whenever we type, we need to make some changes. First, let's minimize the code and then write the necessary updates.

Inside the code, we want to update the search page URL every time we type. We can do this by passing the search term as the query parameter.

To achieve this, we will create a new URL and set it to our window.location.href. This will give us the current page URL. Next, we will update the search parameters by setting the query parameter (queue) to the search term. Finally, we will use window.history.replaceState to update the URL.

letnewURL=window.location.href;// update the search paramsnewURL.searchParams.set('queue',search);// update the URLwindow.history.replaceState(null,null,newURL);

With this code, every time we type, the search page URL will be updated.

Displaying the Search Results

Next, let's work on displaying the search results on the page. Currently, we have set the inner HTML of the search results element to display a spinner. We can copy that code and update it to display the search results.

First, let's rename the variable searchResult to resultsList to make it less confusing. We will update it throughout the code.

letresultsList=document.getElementById('search-results');

Now, let's add a check to see if the resultsList has any items. If it does, we will generate the search list; otherwise, we will display a message saying "No results found."

if(resultsList.length>0){// generate search listgenerateSearchList(resultsList);}else{resultsList.innerHTML='No results found.';}

To generate the search list, we will create a new function called generateSearchList that takes the resultsList as its parameter. In this function, we will loop over the search results and extract the necessary information (title, date, and slug) from each result item.

functiongenerateSearchList(resultsList){resultsList.map((result)=>{// extract necessary informationlettitle=result.item.title;letdate=result.item.date;letslug=result.item.slug;// process the dateletformattedDate=formatDate(date);// create a string to display the search listletlistItem=`${title} - ${formattedDate} - ${slug}`;// append the list item to the resultsListresultsList.innerHTML+=listItem;});}

The generateSearchList function uses the formatDate function to process the date. This function converts the date from a string to a date format.

functionformatDate(date){letformattedDate=newDate(date);// format the date as requiredreturnformattedDate;}

Displaying the Spinner

Lastly, let's change the spinner code to display the spinner briefly and then populate the search results.

letspinner=document.getElementById('spinner');spinner.style.display='block';// Fetch search results code herespinner.style.display='none';

With these updates, you will see the spinner briefly and then the search results being populated on the page.

Conclusion

In this article, we have learned how to update the search results and URL in a web application. By following the steps outlined, we can ensure that the search results are updated dynamically as we type and that the URL reflects the current search term. This functionality enhances the user experience and makes the application more robust. If you have any further questions or improvements, please let us know in the comments.