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

Name	Type	Default	Description
modelValue	String		The text entered in the input element used for filtering items
search	Function		Function which determines which items match the modelValue criteria and are displayed in the list
resultListClass	String	'result-list'	CSS class applied to the result list
resultItemClass	String	'result-list-item'	CSS class applied to items in the result list
getResultValue	Function	result => result	Returns the value of the input element when an item is selected
autoSelect	Boolean		Automatically selects the first item of the result list, when list opens

Events

Name	Arguments	Description
update:modelValue	inputString String	emitted when the change event of the input element fires
blur		emitted when the input element loses the focus
submit	pickedItem Mixed	fires when an item from the list is selected (by click or via keyboard)

Slots

Name	Scoped	Description
result	props, result	result holds the data of the currently rendered item, props holds id, class, role and aria-selected attribute values