Javascript 如何将vuetfy自动完成组件隐藏为字符限制控件？

我正在尝试隐藏建议自动完成组件作为我的字符限制。它首先起作用，但如果字符长度大于我的控制编号，然后我删除字符并重试，建议就会出现。我找不到这条路。我也不应该使用手表功能。我需要使用keydown事件。

我的html代码在这里

<div id="app">
  <v-app id="inspire">
    <v-toolbar
      dark
      color="teal"
    >
      <v-toolbar-title>State selection</v-toolbar-title>
      <v-autocomplete
        v-model="select"
        :loading="loading"
        :items="states"
        :search-input.sync="search"
        item-text="name"
        item-value="id"    
        cache-items             
        class="mx-4"
        flat
        :hide-details="test"
        label="What state are you from?"
        solo-inverted
        @keydown="keydown"              
      ></v-autocomplete>
      <v-flex xs2>
            <v-subheader>Input field value: <strong>{{ value }}</strong></v-subheader>
          </v-flex>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      loading: false,
      items: [],
      search: null,
      select: null,
      value:null,
      test:true,
      states: [
        { name: 'Florida', abbr: 'FL', id: 1 },
        { name: 'Georgia', abbr: 'GA', id: 2 },
        { name: 'Nebraska', abbr: 'NE', id: 3 },
        { name: 'California', abbr: 'CA', id: 4 },
        
      ],
    }
  },
  methods: {
    keydown()
    {
      if(this.search!=null&&this.search.length>2){
         if(this.search && this.select !==this.search){
          this.loading = true
       if (this.timer)
        {
        clearTimeout(this.timer);
        this.timer = null;
        this.states=[];  
        this.items=[]; 
         }    
           
      this.timer=setTimeout(() => {
        this.items = this.states.filter(e => {
          return (e.name || '').toLowerCase().indexOf((this.search || '').toLowerCase()) > -1
        })
        this.loading = false
      }, 800)
         }
      }
    },
  },
})