Create a custom autocomplete list for an input fie

2019-04-30 04:48发布

问题:

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.

回答1:

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