DEV Community

How To: Build A Simple Search Bar in JavaScript

Adriana DiPietro on November 15, 2021

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 ut...

Read full post

Joe Boris • Nov 17 '21 • Edited

EDIT: Edited to sound nicer

Good article. Here are some tips...

You should define the list variable manually. You technically don't need to, because of a little-known feature that automatically defines a global variable for each HTML element with an ID, but it's a bad practice to rely on that.

It looks like you may have made a mistake in the section where you introduce clearList. Your example code still has the placeholder comment for step 4 instead of calling setList.

Your clearList function is overcomplicated. You can just use list.innerHTML = "".

Try to follow more standard conventions and patterns. Instead of setList, I would name it renderList since showing data on the page is referred to as rendering.

Checking the length of the textbox value is unnecessary, because an empty string is already falsy. if( value.trim() ) is sufficient.

I prefer to use append rather than appendChild since it's shorter.

Lastly, you can't go wrong with document.createElement, but I prefer to use innerHTML when possible since it's shorter. You just have to remember that it clears event listeners on children.

Adriana DiPietro • Nov 17 '21

I appreciate the feedback, but there are ways of providing "criticism" as you claim without condescension. Yes -- there are many ways to achieve a goal with code -- we all know that. This is a beginner's ~guide~... guide meaning do things the way you would like and follow my outline to your desired effect. It's nice to see that we all can think and improve on others; but try to say it nicer. Also "shorter" does not equate to better. Sometimes "longer" improves readability, especially for beginners. Nonetheless, I appreciate you taking the time to read and comment on my post. I like continuing the conversation past the post :)

Deon Rich • Mar 24 '22

I agree. Good article, great project for people still starting out.

Adriana DiPietro • Mar 24 '22

Thank you Deon!

Travis Sanon • Oct 6 '22 • Edited

I'd say that

function clearList() {
  list.innerHTML = ''
}

Is easier to read than

function clearList() {
    while (list.firstChild){
        list.removeChild(list.firstChild)
    }
}

Alex-FStack • Jul 24 '22 • Edited

Boris made some great points on how to improve the code, did not see anything 'condescending' in there, all positive criticism and helpful quality tips, seems you cant take any... attitude problem?

Elia Mazzon • Feb 26 '22

Italian fella here, grande grazie!

Adriana DiPietro • Mar 1 '22

Thanks Elia!

TannazDev • Jan 22 '23

Thank you for your good content but there's a question in my mind I just want to make sure that the "e" parameter inside of this arrow function refers to the event that is happening is that correct??

searchInput.addEventListener("input", (e) => {}

KUSHAGRA DUBEY • Jan 29 '23

Yes, "e" represents the event that is happening here.

Safayet Jamil • Nov 15 '21

Nice article for javascript developer.

Adriana DiPietro • Nov 15 '21

Thank you Safayet!

Bernd Wechner • Nov 16 '21

I get a 404 on that link 🤔

Bernd Wechner • Nov 16 '21

Thanks. But I'm curious, why are you posting a link to an unpublished article?

Imia Hazel • Nov 15 '21

Thanks :)

Adriana DiPietro • Nov 15 '21

Thanks for the comment Imia!

Bhavyashah • Nov 16 '21

Nice explanation Adriana but if you add some css then it looks like a full tutorial. Bts no problem this also looks cool. Thanks for sharing ☺️

Adriana DiPietro • Nov 16 '21

Thanks for commenting!!! Yes -- I admit I got a little tired at the end haha

kimo871 • Nov 19 '21

Cool !

Adriana DiPietro • Nov 19 '21

Thanks for commenting :)

KUSHAGRA DUBEY • Nov 19 '21

Thanks for the Knowledge....Really Helpful

Adriana DiPietro • Nov 19 '21

Thanks for the comment!

Tianamanantsoa RAMBELOSON • Nov 17 '21

thanks

Adriana DiPietro • Nov 17 '21

thanks for the comment :)

Ahmed Lotfy • Nov 16 '21

Ur war of explaining is great and simple thnx for ur effort

Adriana DiPietro • Nov 17 '21

Thanks Ahmed! I appreciate it

Bernd Wechner • Nov 17 '21

Cool Magoo. Fix it and publish it then ;-)

Obaino82 • Nov 16 '21

Thanks for sharing

Adriana DiPietro • Nov 16 '21

Thanks for the comment :)

iakovosvo • Nov 16 '21

spammer

Jackson • Nov 15 '21

Thank you for this.
Is there a reason for not using
<input type="search" />?

Adriana DiPietro • Nov 16 '21

Both get the job done, yes! They are functionally identical. However, your way definitely may improve readability.

Meia • Nov 15 '21

So helpful, can't wait to try! Thank you!

Adriana DiPietro • Nov 15 '21

Thank you Meia!

Hammad Jamil • Nov 15 '21

Nice

Adriana DiPietro • Nov 15 '21

Thanks for the comment Hammad!

Gabriel Chukwu • Aug 19 • Edited

Nice work 👍

But, there is something that I noticed
The event listener acts per every input without refreshing, thereby giving repeated result.

I hope there could be a way to refresh the results at every input such that the result shown will only be the expected ones.

To achieve this , you just add
list.innerHTML= " "
at the toppest side before everything in the event listener code, like this

searchInput.addEventListener("input", (e) => {
//Here
list.innerHTML
// 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

}

}
Thanks.

Mary Anne Fusco • Jan 1 '22

Thank you, Adriana! I was struggling with a search bar for my site. It was working somewhat. This article helped me to get it to work seamlessly! Kudos to you!