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 caffeinecritics.com the code can be found on GitHub.

Datalists

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.

    <input
      type="text"
      class="border-grey-light block w-full rounded border p-3"
      list="all-current-producers"
      v-model="producerName"
      @input="updateProducer()"
      />
    <datalist id="all-current-producers">
      <option v-for="producer in producers" :value="producer.name"></option>
    </datalist>

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.

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

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.

Conclusion

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.