When click on input without insert any string, it's display all the items

[guytzhak]

When I have many items available like 1000 items. it's display all the items and "broke" the screen. make the screen larger. how can I prevent the list to show only after type min length?

[smaharj1]

The list should overflow once it reaches the height of 400px by default. You can change it by changing .v-autocomplete-list css property. To trigger the list filter only after a minimum length you can use min-len prop.

So, it would be like:

<v-autocomplete 
   :items="items" 
   v-model="item" 
   :get-label="getLabel" 
   :min-len="3"
   :component-item='template' 
   @update-items="updateItems">
  </v-autocomplete>

[guytzhak]

I tink because I used 'computed' to create a api call for my items it's do it at the first time component load.

So I used 'update-items' method to create call each time the user typed something larger that minLen :)

Thanks

[smaharj1]

How about switching to methods instead of computed?

[dstrohschein]

If you pre-populate your items list and provide focus to the input, it displays the entire list of options without filtering because it sends a blank input to the filtering function the moment it receives focus.

I check to see if the input is blank, and if it is i return nothing. If the input is not blank, I let the filter function continue.