Vuetify Autocomplete minimum character before filtering

Question

Is there a property or a method that will prevent Vuetify Autocomplete to filter items to display until a certain condition is met, such as 3 character typed? I have a basic solution but I really hope that there is another solution. I don't want anything to show until the end user types a minimum of three characters. I have a solutions such as:

   watch: {
   search (val) {
  if(val.length > 2){
    this.minimumCharacter = 'show'
  }else{
    this.minimumCharacter = 'null'
  }

And in my HTML:

        <template
      v-if="minimumCharacter === 'show'"
      slot="item"
      slot-scope="{ item, tile }"
    >

Surely the Autocomplete has a property somewhere that will handle this. When you have thousands and thousands of records you don't really want everything to show as soon as you type one character. But I've search https://vuetifyjs.com/en/components/autocompletes#autocomplete and unless they call it something that I can not relate its not there.

Check this example. Using :filter="customFilter", where you can create your custom logic for returning data. Example is from the documentation — ljubadr
– ljubadr, Commented Jan 18, 2019 at 22:53

LadyBug · Accepted Answer · 2019-12-03 13:38:54Z

4

Surely the Autocomplete has a property somewhere that will handle this. When you have thousands and thousands of records you don't really want everything to show as soon as you type one character. But I've search https://vuetifyjs.com/en/components/autocompletes#autocomplete and unless they call it something that I can not relate its not there.

I cannot find such property, but for me works fine this variant:

watch: {
  search (val) {
  if(val.length > 2){
     //search code
  }

P.S. Filter starts working after search, so it doesn't solve current task to prevent search.

answered Dec 3, 2019 at 13:38

LadyBug

811 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Walker Leite · Accepted Answer · 2019-01-18 22:02:15Z

1

You can use filter prop to implement your own filter function that always returns false if text length is less then 3:

(item, queryText, itemText) => {
    const hasValue = val => val != null ? val : ''

    const text = hasValue(itemText)
    const query = hasValue(queryText)

    if(queryText < 3) return false;

    return text.toString()
      .toLowerCase()
      .indexOf(query.toString().toLowerCase()) > -1
  }

answered Jan 18, 2019 at 22:02

Walker Leite

2231 silver badge7 bronze badges

1 Comment

ljubadr Over a year ago

You should add on how to use custom filter, and where to place the function example from the docs

Collectives™ on Stack Overflow

Vuetify Autocomplete minimum character before filtering

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related