Autocomplete component binds to a text field and offers suggestions to the user while typing based on a static list of results or an Ajax call.

Basic Usage

As long as this component is rendered by Vue it will capture all Ajax calls.

<!-- Fills with its own input field -->
<q-autocomplete v-model="terms" @search="search"></q-autocomplete>
<!-- Binds to a specified textfield -->
<q-autocomplete v-model="terms" @search="search">
<input v-model="terms" class="full-width" placeholder="Type 'fre'" />
<!-- Binds to a textfield from a component, like Search -->
<q-autocomplete v-model="terms" :delay="0" @search="search" :max-results="2">
Don't forget to set delay to 0 ^^^
otherwise you'll get double debounced feedback
<q-search v-model="terms"></q-search>

Vue Properties

Vue PropertyTypeDefault ValueDescription
min-charactersNumber1How many minimum characters can trigger component to suggest something?
max-resultsNumber6How many results can we display at a time?
delayNumber500How many milliseconds to wait before triggering a suggestion?
static-dataObjectNoneUse static suggestions. No need to do an Ajax call. Filtering is provided by Autocomplete component.
delimiterBooleanfalseShould suggestions popover display a delimiter between results?

When using static data, specify an Object this (notice that it uses ListItem component props):

// static-data
// Property name from array of objects below
// that will fill input box when suggestion is selected
field: 'value',
list: [
value: 'Romania', // what gets Autocompleted with
label: 'Romania', // what gets displayed as main label for this suggestion
secondLabel: 'Continent: Europe', // optional
icon: 'location_city', // optional
stamp: '18 mil', // optional

Vue Methods

Only if you want to also trigger it manually. Ajax calls trigger these methods automatically.

Vue MethodDescription
trigger()Trigger suggestions.
close()Close suggestions popover.
setValue()Set textfield string to the value supplied.
move(offset)Move selection cursor on suggestions popover by offset (Number, example: 3 for three selections down, -1 for one selection up).

Vue Events

Vue EventDescription
@search(terms, Function done)Triggered by the component when a search should start and offer some results.
@selected(item)Triggered when user has selected a suggestion.
@openTriggered when the selections pop-up opens.
@closeTriggered when selections pop-up closes.

Example for search event:

function search (terms, done) {
// do something with terms, like an Ajax call for example
// then call done(Array results)
// DO NOT forget to call done! When no results, just call with empty array as param
// Example: done([])