Entering a Value from a List of Values

You can use the new HTML5 list attribute to provide an auto-complete experience for your users. For example, the following code provides a list of three suggestions for your car make:

Click here to view code image

<label>    Car Make:    <input id="inpCarMake"        list="dlCarMakes" />    <datalist id="dlCarMakes">        <option>BMW</option>        <option>Ford</option>        <option>Tesla</option>    </datalist></label>

The list attribute points at an HTML5 datalist element which contains the list of suggestions. When you start entering text into the input element then you get the suggestions displayed in Figure 5.14.

FIGURE 5.14 Getting a list of suggestions

You are not forced to select from the ...

Get Windows® 8.1 Apps with HTML5 and JavaScript Unleashed now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial