DEV Community

Cover image for 👨‍💻 Make AutoComplete Input Box In Pure Javascript 🔥🔥

👨‍💻 Make AutoComplete Input Box In Pure Javascript 🔥🔥

Kushal sharma on August 18, 2020

Hi folks, I hope that you are doing well and are trying to learn some new things during this quarantine. I have started to write a blog with all th...
Collapse
 
manikantapamarthi profile image
Manikanta Nagaraju Pamarthi

I think your just filtering the names array, How to select the name from the list?

Collapse
 
sharmakushal profile image
Kushal sharma

You can easily do this by adding the onclick function to the li element and getting its index and get the respective value from the array for that index and saving to your variable

Collapse
 
xuchunyang profile image
徐春阳

Selecting with mouse seems easy. Most autocomplete interface supports keyboard up/down arrow keys, we need maintain the current selection state somewhere, it does not seem easy to me (I'm a beginner to webdev).

Collapse
 
manikantapamarthi profile image
Manikanta Nagaraju Pamarthi

Yes, I tried with some dynamic data coming from the DB, but on click, is not working. May be because of element rendering problem.

anyhow I fixed my problem in my own way.

Thank you.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Nice one, also think about using a datalist, better support and easier in a sense for what you are demo'ing

Collapse
 
jeromehardaway profile image
Jerome Hardaway

Nice.

Collapse
 
sharmakushal profile image
Kushal sharma

thanx for reading

Collapse
 
andreluis7 profile image
andreluis7

Very nice Kushal!

Collapse
 
sharmakushal profile image
Kushal sharma

thanks for reading

Collapse
 
andrewbaisden profile image
Andrew Baisden

Very cool and easy to implement in projects.

Collapse
 
sharmakushal profile image
Kushal sharma

thanks for reading

Collapse
 
djdev profile image
Deepjyoti Rajkhowa

Nice work. Additionally it would be nice to have it work without being case-sensitive.

Collapse
 
juanduquemkt profile image
Juan Duque

Great!!

Collapse
 
sharmakushal profile image
Kushal sharma

thnx for reading

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

What does pure JavaScript mean anyway? No HTML, no CSS, no C++, no node-gyp?

Collapse
 
sharmakushal profile image
Kushal sharma

Means that without the use of any library like the react, vue or any framework

Collapse
 
joaovmvini profile image
joaovmvini

Nice article, thanks for sharing! I have build a javascript dropdown plugin, check it out: jsuites.net/v3/dropdown-and-autoco...