Vuetify autocomplete組件

1、search-input.sync：在watch里面監聽輸入數據的變化進行查詢操作。
2、update:search-input：用來阻止search-input.sync監聽事件繼續進行。
3、keyup.enter：鍵盤enter事件。

Html

 <v-autocomplete
          class="selectBox"
          v-model="typeContent"
          item-text="allContent"
          item-value="fullname"
          :items="components"
          :loading="isLoading"
          :search-input.sync="changeInfo"
          @update:search-input="changeName"
          @keyup.enter="jumpPage"
          placeholder="e.g. benzene  salbutamol"
          no-data-text="no data"
          solo
          chips
          clearable
          hide-details
          hide-selected
      >
        <template v-slot:selection="{ attr, on, item, selected }">
            <span v-text="item.fullname"></span>
        </template>
        <template v-slot:item="data">
          <template>
            <v-list-item-content>
              <v-list-item-title> {{data.item.fullname}}<span style="color:#9e9e9e;">（Dimension:{{data.item.label_length}}）</span></v-list-item-title>
              <v-list-item-subtitle v-html="data.item.sy"></v-list-item-subtitle>
            </v-list-item-content>
          </template>
        </template>
        <template v-slot:append-outer>
          <v-slide-x-reverse-transition
              mode="out-in"
          >
            <span style="padding-left: 10px;margin-top: -4px;cursor: pointer" @click="jumpPage">
              <v-icon large color="#fff">search</v-icon>
            </span>
          </v-slide-x-reverse-transition>
        </template>
    </v-autocomplete>

data

   typeContent:'',
    components: [],
    isLoading:false,
    changeInfo:null,
    isUpdating:false,
    updataChanggeInfo:null,

watch

 

 changeInfo(val){
        if (this.updataChanggeInfo === null) return;
        this.isLoading = true;
        fetch(`http://database.bio-it.cn/full_name_search?where={"$text":{"$search":"${val}"}}`)
          .then(res => res.json())
          .then(res => {
            const {_items } = res;
            this.components = _items
            this.components.forEach(item=>{
              item['allContent'] = item.fullname + item.sy;
            })
          })
          .catch(err => {
            console.log(err)
          })
          .finally(() => (this.isLoading = false))
      },

 

methods

 

changeName(val){
        this.updataChanggeInfo = val;
     },