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...
For further actions, you may consider blocking this person and/or reporting abuse
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 callingsetList
.Your
clearList
function is overcomplicated. You can just uselist.innerHTML = ""
.Try to follow more standard conventions and patterns. Instead of
setList
, I would name itrenderList
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 thanappendChild
since it's shorter.Lastly, you can't go wrong with
document.createElement
, but I prefer to useinnerHTML
when possible since it's shorter. You just have to remember that it clears event listeners on children.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 :)
I agree. Good article, great project for people still starting out.
Thank you Deon!
I'd say that
Is easier to read than
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?
Italian fella here, grande grazie!
Thanks Elia!
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??
Yes, "e" represents the event that is happening here.
Nice article for javascript developer.
Thank you Safayet!
I get a 404 on that link 🤔
Thanks. But I'm curious, why are you posting a link to an unpublished article?
Thanks :)
Thanks for the comment Imia!
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 ☺️
Thanks for commenting!!! Yes -- I admit I got a little tired at the end haha
Cool !
Thanks for commenting :)
Thanks for the Knowledge....Really Helpful
Thanks for the comment!
thanks
thanks for the comment :)
Ur war of explaining is great and simple thnx for ur effort
Thanks Ahmed! I appreciate it
Cool Magoo. Fix it and publish it then ;-)
Thanks for sharing
Thanks for the comment :)
spammer
Thank you for this.
Is there a reason for not using
<input type="search" />
?Both get the job done, yes! They are functionally identical. However, your way definitely may improve readability.
So helpful, can't wait to try! Thank you!
Thank you Meia!
Nice
Thanks for the comment Hammad!
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
}
Thanks.
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!
Thank you Mary Anne! It is great you kept trying even when you faced obstacles. Congrats!!!
Thank you for the comment Jahid!
Thanks you Sagar. I appreciate your comment :)
You know you can edit your original comment and fix the link there? Just checking.
Thank you ✌
I got everything from other tutorials, but I was getting repeat results, but thanks to your code I finally figured it out!
can u pls share zip file of this design.