3

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>
Daniel Brown
  • 63
  • 1
  • 5

1 Answers1

1

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)}
Michael
  • 4,538
  • 5
  • 31
  • 58
  • unfortunately selectedTopic will always be null until the list shows up and a user clicks a item. so with that code you'll never be able to see the list. – Daniel Brown May 03 '20 at 17:35
  • yes, you need to setup a variable with the `@input` so anytime the input model changes you evaluate it and return the correct items. – Michael May 03 '20 at 17:36
  • 1
    @Michael can you please elaborate this answer a bit more? It's a bit hard to follow exactly how to make this happen, a codepen would be nice (without the slicing) – Thorvald Aug 03 '21 at 10:00