Did you know that you can create an autocomplete field with just HTML? Yes, it is possible with just a few lines of code.

Markup

It works as follows. We’ll need to use an input element with a list attribute as an autocomplete field. The list attribute should have the value of an id attribute of the datalist element.

The datalist element contains a set of predefined option elements that act as suggestions for the input element.

The complete HTML code will look as follows:

<label for="language-field">Choose a programming language:</label>
<input list="languages" id="language-field" name="language-field" />

<datalist id="languages">
  <option value="C">
  <option value="C#">
  <option value="C++">
  <option value="JavaScript">
  <option value="JAVA">
  <option value="PHP">
  <option value="Perl">
  <option value="Python">
  <option value="Ruby">
  <option value="Rust">
</datalist>

Result:

Click on the label or input and start typing.

Appearance and behavior

The appearance of the autocomplete input field and the suggestion box will differ depending on the browser and the operating system. So that’s an important thing to keep in mind when designing an interface.

Datalist on Chrome
Chrome
Datalist on Edge
Edge
Datalist on Firefox
FireFox
Datalist on Safari
Safari

CSS

The input field is a common form element and it is easy to style consistently across different browsers, similar to the select element.

By default, the datalist element has a style of display: none. So when a user clicks on the input field the dropdown shown is not the datalist element, but instead a list preview rendered by the browser. That means to make the dropdown look consistent across different browsers additional functionality has to be added, like custom JavaScript and CSS.

To change the appearance of the arrow, you’ll need to hide it and then you can use encoded SVG as a background image.

input#language-field::-webkit-calendar-picker-indicator {
  display: none;
}

input#language-field {  
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%23333' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px;
}

JavaScript

The datalist element has no particular Web API attached to it, so you’ll just have to use default JavaScript methods to manipulate your HTML autocomplete. This means that in order to customize the appearance and behavior of it, you’ll have to sacrifice native behavior.

Browser Compatibility

The datalist element is supported in all modern browsers. However some issues may occur if you’re willing to support older browsers, please refer to the datalist compatibility table.

Final thoughts

All in all in my opinion, while the default styling and functionality are left untouched the HTML autocomplete is a pretty unique paradigm in web development. However, it lacks some flexibility and customization which can make it a rare use case.

Tags: