1、search-input.sync：在watch里面监听输入数据的变化进行查询操作。
2、update:search-input：用来阻止search-input.sync监听事件继续进行。
3、keyup.enter：键盘enter事件。
Html
1 <v-autocomplete 2 class="selectBox" 3 v-model="typeContent" 4 item-text="allContent" 5 item-value="fullname" 6 :items="components" 7 :loading="isLoading" 8 :search-input.sync="changeInfo" 9 @update:search-input="changeName" 10 @keyup.enter="jumpPage" 11 placeholder="e.g. benzene salbutamol" 12 no-data-text="no data" 13 solo 14 chips 15 clearable 16 hide-details 17 hide-selected 18 > 19 <template v-slot:selection="{ attr, on, item, selected }"> 20 <span v-text="item.fullname"></span> 21 </template> 22 <template v-slot:item="data"> 23 <template> 24 <v-list-item-content> 25 <v-list-item-title> {{data.item.fullname}}<span style="color:#9e9e9e;">（Dimension:{{data.item.label_length}}）</span></v-list-item-title> 26 <v-list-item-subtitle v-html="data.item.sy"></v-list-item-subtitle> 27 </v-list-item-content> 28 </template> 29 </template> 30 <template v-slot:append-outer> 31 <v-slide-x-reverse-transition 32 mode="out-in" 33 > 34 <span style="padding-left: 10px;margin-top: -4px;cursor: pointer" @click="jumpPage"> 35 <v-icon large color="#fff">search</v-icon> 36 </span> 37 </v-slide-x-reverse-transition> 38 </template> 39 </v-autocomplete>
data
1 typeContent:'', 2 components: [], 3 isLoading:false, 4 changeInfo:null, 5 isUpdating:false, 6 updataChanggeInfo:null,
watch
1 changeInfo(val){ 2 if (this.updataChanggeInfo === null) return; 3 this.isLoading = true; 4 fetch(`http://database.bio-it.cn/full_name_search?where={"$text":{"$search":"${val}"}}`) 5 .then(res => res.json()) 6 .then(res => { 7 const {_items } = res; 8 this.components = _items 9 this.components.forEach(item=>{ 10 item['allContent'] = item.fullname + item.sy; 11 }) 12 }) 13 .catch(err => { 14 console.log(err) 15 }) 16 .finally(() => (this.isLoading = false)) 17 },
methods
1 changeName(val){ 2 this.updataChanggeInfo = val; 3 },