关于element-ui的input使用远程搜索的几个小点

远程搜索

从服务端搜索数据, 大概的流程是这样的, 首先从后台拿取所有数据, 然后根据用户所输入的keyword从数据里面筛选出来, 如果把请求的API放在*:fetch-suggestions*里面的话, 会随着用户的输入, 往后台疯狂调用接口.

<el-autocomplete size="small"
    style="width: 100%;"
    placeholder="请输入详细地址"
    :fetch-suggestions="queryAddDetail"
    value-key="DZQC"
    v-model="form.SC_STREET"
</el-autocomplete>
...
<script>
data () {
    return {
        addDetailDataList: []
    }
},
methobs: {
    async getAddDetailData (KEYWORD) {
    // 这里从后台请求数据
      let params = {
        SC_DISTRICT: this.form.SC_DISTRICT,
        KEYWORD,
        F_ADDR_LANE: this.form.F_ADDR_LANE
      }
      let cbData = await getAddDetail(params)
      if (cbData.code === 200) {
        this.addDetailDataList = cbData.data.data
      } else {
        this.addDetailDataList = []
      }
    },
    queryAddDetail (queryString, cb) {
      this.getAddDetailData(queryString)
      let addDetailDataList_ = this.addDetailDataList;
      let results = queryString ? addDetailDataList_.filter(this.createFilter(queryString)) : addDetailDataList_;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
    // 从数据列表里面查找字段DZQC的字符来匹配
      return (res) => {
        return (res.DZQC.indexOf(queryString) !== -1);
      };
    }
}
</script>

!要注意的点:

1. :fetch-suggestions=“queryAddDetail”, 这个函数跟blur事件一样, 获取焦点就触发回调, 使用不用额外写事件触发, 直接把数据请求放到该函数里面即可;
2. value-key官方说明

参数	说明	默认值
value-key	输入建议对象中用于显示的键名	value

即列表展示的title, 所以要根据后台返回的数据字段来设置, 比如[{‘add’: ‘大望路1号’}, {‘add’: ‘东风西路’}], 那么这个value-key="add"

3. createFilter这个函数, 官方默认的是indexOf === 0, 即以用户输入的第一个字查找结果中的第一个字符串, 查找到匹配即返回, 但是, 这种过滤条件不是很合理, 用户不一定从头输到尾, 比如一个地址示例: 广东省广州市天河区, 如果按官方的写法, 用户要输入’广东省’开头才能匹配到结果, 输’天河’或者’广州’都不能匹配. 所以笔者将indexOf === 0 改成 indexOf !== -1, 即不管用户怎么输入, 反正能找到匹配的字符串都给我返回数据.