Skip to content

Autocomplete

Default Component

Apart from the required props only some basic styling is applied.

js
const pickedItem = ref(null)
const items = ["Afghanistan", "Åland Islands",... "Zambia", "Zimbabwe"]
const findItem = async query => {
    await new Promise(resolve => setTimeout(resolve, 500));
    return items.filter(item => item.toLowerCase().indexOf(query.toLowerCase()) !== -1)
}
html
<autocomplete
    :search="findItem"
    v-model="pickedItem"
    placeholder="pick a country"
    class="w-full"
    result-item-class="py-2 px-4 cursor-pointer hover:bg-gray-200"
    result-list-class="overflow-auto max-h-96 bg-white shadow-md"
/>

Result

Component with Complex Items

js
const pickedObj = ref(null)
const autocompleteQuery = ref('')
const itemObjs = [
    { country: "Austria", capital: "Vienna", pop: 8901064 },
    ...
    { country: "Ireland", capital: "Dublin", pop: 4982904 }
]
const findObj = async query => {
    await new Promise(resolve => setTimeout(resolve, 500));
    return itemObjs.filter(item => item.country.toLowerCase().indexOf(query.toLowerCase()) !== -1)
}
html
<autocomplete
    v-model="autocompleteQuery"
    :search="findObj"
    :get-result-value="result => result.country"
    placeholder="pick a country"
    class="w-full"
    result-list-class="overflow-auto max-h-96 bg-white shadow-md"
    result-item-class="py-2 px-4 cursor-pointer hover:bg-vxvue-50"
    @submit="autocompleteQuery = $event.country; pickedObj = $event"
>
    <template #result="slotProps">
        <div v-bind="slotProps.props">
            <div class="font-bold">{{ slotProps.result.country }}</div>
            <div class="text-sm">{{ slotProps.result.capital }}, pop {{ new Intl.NumberFormat('en-US', { maximumSignificantDigits: 3 }).format(slotProps.result.pop / 1e6) }}m</div>
        </div>
    </template>
</autocomplete>

Result

Selected object:

Properties

NameTypeDefaultDescription
modelValueStringThe text entered in the input element used for filtering items
searchFunctionFunction which determines which items match the modelValue criteria and are displayed in the list
resultListClassString'result-list'CSS class applied to the result list
resultItemClassString'result-list-item'CSS class applied to items in the result list
getResultValueFunctionresult => resultReturns the value of the input element when an item is selected
autoSelectBooleanAutomatically selects the first item of the result list, when list opens

Events

NameArgumentsDescription
update:modelValueinputString Stringemitted when the change event of the input element fires
bluremitted when the input element loses the focus
submitpickedItem Mixedfires when an item from the list is selected (by click or via keyboard)

Slots

NameScopedDescription
resultprops, resultresult holds the data of the currently rendered item, props holds id, class, role and aria-selected attribute values