Search code examples
listvue.jsdrop-down-menuvuetify.jsv-autocomplete

Do not display options in v-autocomplete until there is input vuetify


I currently have a v-autocomplete component but once the user clicks the search it expands and shows all available items. I want the list of items to only display once there is input. There are too many available items and don't want the user seeing all of them right off the bat. Also if there is a way to limit it to only showing the top 5 that match the user input.

<v-autocomplete class="vtext"
            v-model="selectedTopic"
            :items="getTopics"
            item-text="Name"
            item-value="Id"
            :outlined="false"
            :rounded="true"
            :solo="true"
            :single-line="true"
            append-icon='fa fa-search'
            @change="topicSelected()"
            :hide-no-data="true"
            :allow-overflow="false"
            no-data-text="No topic found"
            return-object
        >
        </v-autocomplete>

Solution

  • The reason it shows all items on initialization (when clicking empty), is because you are setting the items right away with getTopics what you need to do in that function is check

    <v-autocomplete class="vtext"
    ...
    @input="handleInput"
    if (inputModel){ //get the topics}
    else { return []}
    

    In terms of only getting the first 5 results, again you do it in the same function:

    if (inputModel){
    // do search
    return results.slice(0,5)}