Fork me on GitHub

Vuetify autocomplete组件

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      },

 

posted @ 2020-04-24 14:42  `A+  阅读(1060)  评论(0)  编辑  收藏  举报