JavaScript - Implementing a Search Bar with JavaScript and AJAX

Jul 06, 2023
Article · 3 min
621 words

Like (0)
Favorite (0)

Hello dev's, today I'll show you how to create a search bar with JavaScript and AJAX, without using any framework or library like bootstrap or jQuery. So, let's see how we can easily implement a search bar using JavaScript & AJAX only.

Setup index.html
Output

Setup index.html

Here we we'll write some CSS code and JS code to design and manipulate a html content so that after hitting the search bar we can load our content. So, look at the below source code

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Implementing a search bar with JavaScript and AJAX - shouts.dev</title>
  <style>
    #search-form {
  display: flex;
  align-items: center;
}

#search-input {
  padding: 8px;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #ccc;
  flex-grow: 1;
  outline : 0;
}

#search-button {
  padding: 8px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  margin-left: 8px;
}

#search-results {
  margin-top: 16px;
}

.search-result {
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid #ccc;
}
  </style>
</head>
<body>
	<form id="search-form">
  <input type="text" id="search-input" placeholder="Enter Country Name and Hit Enter">
  <button type="submit" id="search-button">Search</button>
</form>

<div id="search-results"></div>

<script>
const form = document.getElementById('search-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  const searchTerm = document.getElementById('search-input').value;
  searchForTerm(searchTerm);
});
function searchForTerm(searchTerm) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      displaySearchResults(xhr.responseText);
    }
  };
  xhr.open('GET', 'https://restcountries.com/v3.1/name/' + searchTerm); //here use your own server side url
  xhr.send();
}
function displaySearchResults(searchResults) {
  let results = [];
  let search = JSON.parse(searchResults);
  for(var i =0;i<search.length;i++)
  {
    let country = search[i].name; 
    results += country.official;
    results += '<br>';
  }

  const resultsContainer = document.getElementById('search-results');
  resultsContainer.innerHTML = results;
}
</script>
</body>
</html>

First, create the HTML for the search bar then we we're using CSS to style the search input field and button, as well as any search results that are displayed. And then we use an event so that when the user submits the search form, it'll trigger an AJAX request to retrieve the search results. So that , we add an event listener to the form that prevents the default form submission behavior and instead triggers the AJAX request. The searchForTerm() function will use AJAX to retrieve the search results from the server. We can use the XMLHttpRequest object to make the AJAX request. And when the AJAX request returns, we'll process the search results and display them to the user. For that we write a displaySearchResults() function that takes the search results as a parameter and inserts them into the DOM.

Output

So if we open our html file in our browser then we can find the below output.

That's it for today. I hope you've enjoyed this tutorial. Thanks for reading. 🙂

JavaScript

#JS #javascript #ajax