DEV Community

Tom Nijhof
Tom Nijhof

Posted on

1

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

Datalist on [caffeinecritics](https://caffeinecritics.com/)

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>
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](https://caffeinecritics.com/) 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](https://caffeinecritics.com/)

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.

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay