Datalists or 50 lines of extra JavaScript and HTML?
Tags: webdev, javascript, html, beginners
Published: 2024-05-29 20:46:13

If you’re looking to incorporate an autocomplete feature into your text input fields, there are two options available: using [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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](https://github.com/rate-my-drink/rate-my-drink.github.io/pull/42/files).
> # This blog is part of [caffeinecritics.com](https://caffeinecritics.com/) the code can be found on[ GitHub](https://github.com/rate-my-drink/rate-my-drink.github.io).

## Datalists

![Datalist on [caffeinecritics](https://caffeinecritics.com/)](https://cdn-images-1.medium.com/max/2000/0*U2s5ChTsAN0gty0t)

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.*

```html
    <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%](https://caniuse.com/?search=datalist) 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](https://caffeinecritics.com/) use Chrome for Android](https://cdn-images-1.medium.com/max/2160/0*rd0gPZ-y17-VPE-A)

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](https://caffeinecritics.com/)](https://cdn-images-1.medium.com/max/2000/0*cJAxKBfnZno2cYFG)

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.