DEV Community

How to create an autocomplete input with plain Javascript

Stephen Afam-Osemene on August 13, 2017

Now, most people who have built websites have included forms. Regular text elements, number, select (dropdown), checkboxes and radio buttons. ...

Read full post

Qudus • Aug 17 '17

Hi, Afam
This is a great article; its good to see this implementation in Vanilla JS. But i'd like to know the reason why you are testing for this condition in your JS file

!isNaN(input.value)

Thanks.

Stephen Afam-Osemene • Aug 18 '17

Thanks for spotting that. There's actually no reason for that in the example.
It was specific code for a project.

I'll edit.

Moe • Aug 15 '17

Thank you! I need to do an autocomplete form and I had no idea where to start! 🔑

Stephen Afam-Osemene • Aug 15 '17

You're welcome!!!

I'm really happy that this helped

ADONIS SIMO • Dec 14 '19

this saved my day... thanks a lot

ADONIS SIMO • Dec 15 '19

I've made this after reading you tutorial, github.com/simo97/Nefertiti,

it is moslty for the case you already has an existing app with , the goal here is to turn them into lightweight autocomplete input. No dependencies, plain vanilla js, based on as you teach me.

thanks it save me from a lot of refractoring on my current project.

Stephen Afam-Osemene • Dec 16 '19

That's great! Thanks for the feedback. I'll check your project out.

danhodge • Mar 24 '18

Great post - datalist is a really powerful addition to HTML5 that I was not aware of.

Stefan Age • Nov 6 '17 • Edited

Thanks for this! I'm trying to write a React component that does the same, this will be a huge help.

Tyler Anyan • Jan 27 '18

This is exactly what I've been looking for, so thanks for posting! I am getting a host of issues, however, and I'm a bit of a newbie with some of this (especially php) so I'm not sure what the wrench in the gears is here...

In Chrome: Failed to load file:///C:/query.php?query=N: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

In Chrome with web server:
Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at XMLHttpRequest.window.hinterXHR.onreadystatechange (index.js:35)

In Firefox: NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
window.hinterXHR.send();