Demonstrate using datalist for dropdown

Instead of a JS-based implementation, you can use datalist with compatible browsers to autocomplete and a dropdown

by Andrew Holloway

HTML

Start typing a city: <input list="cities" name="cityChoice">

<datalist id="cities">
  <label> or select from a dropdown (in older browsers)</label>
  <select name="cityChoice">
    <option value="Chicago">Chicago</option>
    <option value="Los Angeles">Los Angeles</option>
    <option value="Sunnyvale">Sunnyvale</option>
    <option value="San Francisco">San Francisco</option>
    <option value="Oakland">Oakland</option>
    <option value="Calgary">Calgary</option>
    <option value="Portland">Portland</option>
    <option value="Seattle">Seattle</option>
    <option value="Las Vegas">Las Vegas</option>
    <option value="New York">New York</option>
  </select>
</datalist>

CSS

/* Look, ma! No Styles! */

JavaScript

// Look, paw! No JS!
// Autocomplete implemented with HTML only