How To: Build A Simple Search Bar in JavaScript

How To: Build A Simple Search Bar in JavaScript

Originally posted on dev.

Hi Everyone!

Today, we will be walking through how to build a functional, yet very simple search bar in JavaScript. This mini project will also utilize CSS and HTML.

💭💭💭💭💭💭💭💭💭💭💭

Let’s look at our goals:

  1. Creating Base Files
  2. Building out the Basics of the HTML File
  3. Creating Simple Data
  4. Establishing Event Listeners
  5. Showing Results on the Page
  6. Clearing Results from the Page
  7. Showing No Results/Invalid Input
  8. Testing Our Code

Now that we have a clear outline of what we need to achieve… let’s get started!


Creating Base Files

Remember: this is a simple project. You may want to add and embellish this as you want. But for today’s needs, we will only need three (3) files:

  1. index.js
  2. index.html
  3. style.css

We have one (1) JavaScript file which will hold our event listeners, functions, variable declarations + assignments, and our basic data.

We have one (1) HTML file which will hold our DOM elements and portray our code in a visible format onto the web page.

And we have one (1) CSS file which we will use to style our HTML elements and add some flair + creativity.

You can create these files directly in your code editor(by right clicking and choosing “new file” or using the new file button) or in your terminal:

touch index.html
touch index.js
touch style.css

Building out the Basics of HTML

I usually utilize the standard pattern of HTML5 to get started; it looks something like this:

<!DOCTYPE html>
   <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Search Bar</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <script src="index.js"></script>
      </body>
   </html>

In the title tags, you may name your project anything you would like. This is not necessarily visible on the browser page, but visible as the tab label on your browser.

<title>Search Bar</title>

Two (2) important things to initially add (and by initially, I mean right away!) are the necessary link and script tags. Get into the practice of adding a link tag of style.css file and a script tag of your index.js file as you begin to build out your HTML file.

<head>
  <link rel="stylesheet" href="style.css">
</head>

The stylesheets should go in the head tag portion of your HTML file. This tag allows whatever styling you program in your CSS file to appear visibly on the browser.

While the script tag to your JavaScript file should go in the body tag. It is common to put it toward the bottom. It is important to connect your HTML file with any of your JS files. Your JS files will reference DOM elements from your HTML.

<body>
    <script src="index.js"></script>
</body>

Now, we will need some elements nested in the body of our HTML. We will definitely need:

  • a form element with an input field
  • a “clear” button to clear our results
  • an unordered list element to hold our results

Here is an example:

<body>
    <div class="form-container">
              <form class="form">
                  <input id="search" type="text" class="input" placeholder="search..."/>
                  <button id="clear" class="clear-results">clear</button>
              </form>

    </div>
    <div class="results-container>
       <ul class="results-list" id="list">

       </ul>
    </div>

       <script src="index.js"></script>
    </body>

With each element, provide a “class” name and/or “id”. Make sure the class names or id names reflect what the element is doing or providing.

From outside-in, I created a div element called “form-container”; this is a regular standard in JavaScript. We want our different sections, that have specific roles, to be nested in their own containers. So, our form container contains the form and the adjacent buttons. Then, we have another div called “results-container”, this will hold our results.

Within our form container, I created a form element. This holds our succeeding form elements. I created an input tag with a type of “text”. This allows the user to type inside the input form. I also provided a class name, id and a placeholder. I then created a “submit” button with a type of “submit”; this button also has a class name. The text between the button tags will showcase “search” on the button in the browser. The same idea goes for the “clear” button.

Our browser should look something like this:
search bar

So, our HTML file is set: let’s continue onto our JavaScript file.


Creating Simple Data

Since we are not referencing an API, as this is a simple project, we are going to create some simple data to be rendered onto the page as search results. Head into your index.js file.

I like to create data using JavaScript nested arrays. For today’s example, our data is going to be people’s names. So our array is going to be called “people”.

const people = []

Each array item is going to be an object — meaning each array item is going to have a property and value.

  const people = [
    { name: 'adri'},
    { name: 'becky'},
    { name: 'chris'},
    { name: 'dillon'},
    { name: 'evan'},
    { name: 'frank'},
    { name: 'georgette'},
    { name: 'hugh'},
    { name: 'igor'},
    { name: 'jacoby'},
    { name: 'kristina'},
    { name: 'lemony'},
    { name: 'matilda'},
    { name: 'nile'},
    { name: 'ophelia'},
    { name: 'patrick'},
    { name: 'quincy'},
    { name: 'roslyn'},
    { name: 'solene'},
    { name: 'timothy'},
    { name: 'uff'},
    { name: 'violet'},
    { name: 'wyatt'},
    { name: 'x'},
    { name: 'yadri'},
    { name: 'zack'},
]

Here is our simple data! Feel free to create an array of food, colors, TV shows… anything you want!


Establishing Event Listeners

We have to establish two (2) event listeners. An event listener waits for an event to happen (a “click”, a “keystroke”, “input”) and then invokes an action. In this case, we need to have something happen when input is typed into the input form and when the clear button is clicked. In JavaScript, event listener syntax looks something like this:

whateverElement.addEventListener("event type", () => {

}

So, for our input form to have an event listener attached to it, I am going to use a querySelector to retrieve the button by its class name and set it to a constant (so that it can be used later).

const searchInput = document.querySelector('.input')

I am now going to attach the event listener to the constant we declared and assigned:

searchInput.addEventListener("input", (e) => {
    // inside, we will need to achieve a few things:
    // 1. declare and assign the value of the event's target to a variable AKA whatever is typed in the search bar
    let value = e.target.value

    // 2. check: if input exists and if input is larger than 0
    if (value && value.trim().length > 0){
        // 3. redefine 'value' to exclude white space and change input to all lowercase
         value = value.trim().toLowerCase()
        // 4. return the results only if the value of the search is included in the person's name
        // we need to write code (a function for filtering through our data to include the search input value)
    } else {
        // 5. return nothing
        // input is invalid -- show an error message or show no results

    }

}

Let’s create a foundation for the clear button:

const clearButton = document.getElementById('clear')

clearButton.addEventListener("click", () => {
    // 1. write a function that removes any previous results from the page
})

Showing Results on the Page

To show our results, we have to ultimately iterate through our simple data and if any of the data matches the input value, then append the data to the page (visibly).

Let’s create a function that first appends the results to the webpage.

// creating and declaring a function called "setList"
// setList takes in a param of "results"
function setList(results){

    for (const person of results){
        // creating a li element for each result item
        const resultItem = document.createElement('li')

        // adding a class to each item of the results
        resultItem.classList.add('result-item')

        // grabbing the name of the current point of the loop and adding the name as the list item's text
        const text = document.createTextNode(person.name)

        // appending the text to the result item
        resultItem.appendChild(text)

        // appending the result item to the list
        list.appendChild(resultItem)
    }
}

Now, that we have written how to append the results to the page; we need to focus on figuring out what should be appended to the page.

If we go back to our event listener, we left off at #4.
We are going to call “setList()” and pass in our people array, but not the whole array. We are going to filter through the people array and only use the items of “people” whose name value’s include the value of the search input.

searchInput.addEventListener("input", (e) => {
    let value = e.target.value

    if (value && value.trim().length > 0){
         value = value.trim().toLowerCase()

        //returning only the results of setList if the value of the search is included in the person's name
        setList(people.filter(person => {
            return person.name.includes(value)
        }))

Let’s test this, if we type “be” into our search bar, “becky” should appear on the page underneath the search bar.

What do you see ?


Clearing Results from the Page

To remove the results from the page, we need to call on our “list” element and remove each child because right now our result items are children elements of “list”.

An easy, quick way to do this is to remove the first child of the parent element, until there is no more… we can do this using a “while” loop.

** While Loops: while the condition is still true, do the action described. **

function clearList(){
    // looping through each child of the search results list and remove each child
    while (list.firstChild){
        list.removeChild(list.firstChild)
    }
}

We can refer to this function, clearList(), in our event listeners —

searchInput.addEventListener("input", (e) => {
    // inside, we will need to achieve a few things:
    // 1. declare and assign the value of the event's target to a variable AKA whatever is typed in the search bar
    let value = e.target.value

    // 2. check: if input exists and if input is larger than 0
    if (value && value.trim().length > 0){
        // 3. redefine 'value' to exclude white space and change input to all lowercase
         value = value.trim().toLowerCase()
        // 4. return the results only if the value of the search is included in the person's name
        // we need to write code (a function for filtering through our data to include the search input value)
    } else {
        // 5. return nothing
        clearList()

    }

}
clearButton.addEventListener("click", () => {
    clearList()
})

Showing No Results

Well, we have to ask ourselves, what happens if the input value renders no matches? no results? We need to tell the user exactly that!

Let’s build a function called “noResults()”. This function will render an error message onto the page, where the results would’ve been.

function noResults(){
    // create an element for the error; a list item ("li")
    const error = document.createElement('li')
    // adding a class name of "error-message" to our error element
    error.classList.add('error-message')

    // creating text for our element
    const text = document.createTextNode('No results found. Sorry!')
    // appending the text to our element
    error.appendChild(text)
    // appending the error to our list element
    list.appendChild(error)
}

We can use this function within our setList() function:

function setList(results){
    clearList()
    for (const person of results){
        const resultItem = document.createElement('li')
        resultItem.classList.add('result-item')
        const text = document.createTextNode(person.name)
        resultItem.appendChild(text)
        list.appendChild(resultItem)
    }

    if (results.length === 0 ){
        noResults()
    }
}

Testing Our Code

Now, that we have beautifully written JavaScript file and HTML file, loaded with event listeners, variable declarations and functions, we can test our code.

Head over to your browser… in your terminal, type:

open index.html

Here is what I see… I added a title and did some slight styling…

Case # 1: No Input (yet)
no input yet

Case # 2: Results!
Image description

Case # 3: No Matching Results
Image description



Thank you so much for reading along and coding with me. I hope you learned as much as I have with this mini-JavaScript project.

 

 

Source: dev