带输入建议el-autocomplete

Element-ui官网

https://element.eleme.cn/2.13/#/zh-CN/component/installation

效果

需求

1.输入后下方显示输入建议

2.根据输入内容对建议列表进行模糊查询（范围为品名、别名、cas号三个字段）

实现

1.html代码

<el-autocomplete 
    clearable 
    class="handle-input-width" 
    v-model="appendForm.whpmc2" 
    value-key="value"
    :fetch-suggestions="FilterEntityName" 
    :trigger-on-focus="false" 
    placeholder="请输入危化品名称" 
    @clear="blurForBug()"
    @select="handleSelect" >    
</el-autocomplete>

:trigger-on-focus="false" //设置在输入内容后展示输入建议（默认鼠标选中就展示）

2.页面初始化的时候获取列表数据

 getNameList() {
      let data  = [
        {
          pm:'乙醚',
          bm:'yimi',
          cas:'2511'
        },
        {
          pm:'乙醇',
          bm:'yichun',
          cas:'5699'
        },
        {
          pm:'甲烷',
          bm:'jiawan',
          cas:'9899'
        },
        {
          pm:'乙醇',
          bm:'yichun',
          cas:'4633'
        },
      ]
      this.whpNameList= data.map((val) => {
        return {
          value: val.pm,
          pm:val.pm,
          bm:val.bm,
          cas:val.cas,
        };
      });
    },

element-ui规定项必须有value属性，否则显示不出来  

这里从后端接受的数据中如果没有这个字段可以用map加上，如果有就可以直接用

3.调用的方法

    // 危化品名称下拉框模糊查询
    FilterEntityName(queryString, cb) {
      var whpNameList2 = this.whpNameList;
      var results = queryString
        ? whpNameList2.filter(this.createFilter(queryString))
        : whpNameList2;
      cb(results);
    },
    // 模糊查询
    createFilter(queryString) {
      return (res) => {
        const pm = (res.pm.indexOf(queryString) !== -1)
        const cas = (res.cas.indexOf(queryString) !== -1)
        const bm = (res.bm.indexOf(queryString) !== -1)
        return (pm||cas||bm);
      };
    },
    // 最终选择的数据
    handleSelect(val) {
      this.appendForm.whpmc2 = val.value
    },
    blurForBug() {
      document.activeElement.blur()
    },

bug

上述代码中已经修复了关于clearabled的bug

bug复现

解决

    blurForBug() {
      document.activeElement.blur()
    },

每次点击清空后使输入框失去焦点