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
 
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
 
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
 
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
 
andrewbaisden profile image
Andrew Baisden •

Very cool and easy to implement in projects.

Collapse
 
sharmakushal profile image
Kushal sharma •

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