Vanilla JavaScript live search

— 7 minute read

Today we will be working on a more real-world scenario, implementing a live search in JavaScript!

In our example, we will be using an array of names and countries. We will then have a search bar. On input, it filters the array to showcase only matching search results.

Find the example code in this Codepen

Try and search for something (e.g. Japan or Abel)

See the Pen Vanilla JavaScript live-search by Chris Bongers (@rebelchris) on CodePen.

Step 1: HTML Structure for search input

<h1>JavaScript live search</h1>
<input
  autocomplete="off"
  type="search"
  id="search"
  placeholder="Search for a country or name!"
/>
<ul id="results"></ul>

In today's article we are more focused on the JavaScript part than actual the HTML structure or styling, so a very basic setup.

We use an input field where we will base the results on. And define an empty <UL> with the ID results

Step 2: CSS styling to make it pretty

As for the CSS, we add some basic styling to make it all centered with Flex, and look a little bit nicer.

body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  flex-direction: column;
}
input {
  width: 250px;
  text-align: center;
}
ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

Step 3: JS code for the live search function

Now on to the magic part, in this example, I prepared a random array of data consisting of the following structure:

const data = [
  {name: 'Ryan', country: 'Saint Lucia'},
  // 99 more
];

Then we need to define the variables we are going to use.

const search = document.getElementById('search');
const results = document.getElementById('results');
let search_term = '';

The search variable is our input element, results is our ul list, and the search_term is whatever we input in our search field.

Now let's create a JavaScript function to capture the search input.

search.addEventListener('input', (event) => {
  search_term = event.target.value.toLowerCase();
  showList();
});

Here we add an input listener to our search and capture the value (in lowercase), then we call a function called showList which we will build now.

const showList = () => {};

In there we start with clearing whatever is in the list already.

const showList = () => {
  results.innerHTML = '';
};

Now we want to loop over all our data elements:

data.filter((item) => {
  // todo
});

We make use of the filter ES6 function.

In there, we want to check if either the name or the country matches our search string.

data.filter((item) => {
  return (
    item.country.toLowerCase().includes(search_term) ||
    item.name.toLowerCase().includes(search_term)
  );
});

As you can see we match either on country OR (||) on the name. Now in the filter we get a single item from our array. We then check if the value in lowercase matches (includes) our search term.

If so, we return this, remember that filter will then modify on it's own.

The last step is then to append a new list item to our ul.

data
  .filter((item) => {
    return (
      item.country.toLowerCase().includes(search_term) ||
      item.name.toLowerCase().includes(search_term)
    );
  })
  .forEach((e) => {
    const li = document.createElement('li');
    li.innerHTML = `<i>Name:</i> ${e.name}  || <i>Country:</i> ${e.country}`;
    results.appendChild(li);
  });

There you go! All that's left is to initially call the method.

Place the following at the bottom of your scripts.

showList();

Thank you for reading this tutorial, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter