Create a custom autocomplete list for an input field

Question

I need to create a custom auto-complete list of suggestions for an input field. So far I have associated an event handler to the input event to the html input element, so that when that event triggers, I can fetch the suggestions.

The problem is how would I show these suggestions. By default, input elements can display suggestions, but is it possible to customize/access those suggestions?

If not, what would be the alternatives?

Preferably I would like not to use external libraries.

Daniel Konopka · Accepted Answer · 2015-11-29 16:56:54Z

47

You may use 'datalist' tag but it doesn't work in IE <= 9

    <!DOCTYPE html>
    <html>
        <body>
            <form>

              <input list="country" name="countru">

              <datalist id="country">

                <option value="U.S.">
                <option value="France">
                <option value="China">
                <option value="Cambodia">
                <option value="Chile">
                <option value="Canada">
                <option value="Poland">

              </datalist>

              <input type="submit">
            </form>
        </body>
    </html>

Run the code and try typing 'C' and then 'a'.

edited Nov 29, 2015 at 16:56

answered Nov 29, 2015 at 16:49

Daniel Konopka

4945 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mayank Dudakiya Over a year ago

This is really great way of adding autocomplete in any technology without using any third party libraries. Thanks

Collectives™ on Stack Overflow

Create a custom autocomplete list for an input field

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related