Input suggestions using datalist

Suggestions for an input are very useful to improve UX of forms. A lot of developers use a complex code of JavaScript to achieve it. Fortunately, HTML supports it natively. I guess, many developers (including me) don't know or forgot it. Please have a look on my code to see how to add suggestions easily.

    <input type="text" v-model="lang" list="languages"/>
    <datalist id="languages">
              v-for="language in languages"
        {{ }}
      Selected language: {{ lang }}

<script setup>
import { ref } from 'vue'

const lang = ref()

const languages = [
    name: 'English',
    value: 'en',
    name: 'French',
    value: 'fr',
    name: 'German',
    value: 'de',
    name: 'Italian',
    value: 'it',
    name: 'Polish',
    value: 'pl',

In my example, I used Vue but it can also be done without any code of JS. The most important part is <datalist>. It contains the <option> tag like inside select. To connect datalist with input, you need to set the list attribute - it has to be the same like id in datalist, and that's it!.

You can test above code on Vue SFC Playground.


Blog Comments powered by Disqus.

Older Post Newer Post