DEV Community

Tom Nijhof
Tom Nijhof

Posted on

Datalists or 50 lines of extra JavaScript and HTML?

If you’re looking to incorporate an autocomplete feature into your text input fields, there are two options available: using datalist or writing some JavaScript. I experimented with both on my website to compare their pros and cons. The main difference are in my pull request 42.

This blog is part of the code can be found on GitHub.


Datalist on [caffeinecritics](

With just a few lines of code, you can easily add autocomplete functionality to your input fields. The code is surprisingly simple and took me much more code to accomplish without it.

Code is not the product, it is the liability of the product.

      class="border-grey-light block w-full rounded border p-3"
    <datalist id="all-current-producers">
      <option v-for="producer in producers" :value=""></option>
Enter fullscreen mode Exit fullscreen mode

According to recent statistics, Datalist is supported by a whopping 97.5% of websites. However, there’s one notable exception — Firefox for Android, which does not support Datalist. However, it only has a market share of 0.3%. This minor setback can be particularly frustrating given that I use this browser personally. Additionally, some browsers offer integration with Datalist, such as Chrome for Android, which allows users to easily access and utilize the feature through the keyboard.

Datalist on [caffeinecritics]( use Chrome for Android

However, there is a drawback to using datalists. By default, the browser styles them, which means you have limited control over their appearance. While you can overwrite this by adding your own CSS, doing so requires extra effort and additional JavaScript code.

Own JavaScript

Own JavaScript on [caffeinecritics](

Our own JavaScript will improve across various platforms, including Firefox on Android. However, it’s worth noting that some browsers may lose their unique integration features. On the other hand, you’ll regain a significant amount of styling freedom. I must admit, I prefer the new look much more, but it requires additional effort to ensure seamless support for mobile browsers as well.


Datalists have some advantages and disadvantages. On the plus side, they offer less code and better integration with web browsers, making it easier to use them. However, there are also some drawbacks to consider. For instance, styling Datalists can be more challenging, and they’re not supported by Firefox on Android devices. Personally, I opted for Datalists because I prefer to keep my code simple.

Top comments (0)