element input 远程搜索

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<template>
<div>
    <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelect"
    ></el-autocomplete>
</div>
</template>
<script>
export default {
    data (){
        return{
            state: "",
            restaurants: [],
        }
    },
    methods: {
        
        // 调用后端接口，获取远程搜索内容
       async querySearchAsync(queryString, cb) {
        var restaurants = await getSubjectInfo();
            // 输入框下拉选项显示内容自定义：拼接name 和 code 
        restaurants.forEach(item => {
            item.value = item.name + "\xao\xao\xao" + item.code;
        });

        // 调用过滤方法对输入的字符串进行过滤
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        cb(results);
      },

    //   筛选符合条件的选项
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
        };
      },
      handleSelect(item) {
          this.state = item.code
        //   选择之后更新输入框绑定的数据，把 code 绑定在 state 输入框中
        console.log(item);
      }
    }
}
</script>