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.
<template>
<div>
<input type="text" v-model="lang" list="languages"/>
<datalist id="languages">
<option
v-for="language in languages"
:value="language.value">
{{ language.name }}
</option>
</datalist>
<div>
Selected language: {{ lang }}
</div>
</div>
</template>
<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',
},
]
</script>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.