vue中实现输入框可模糊查询并带有下拉提示的应用

• 前言

• 解决方案

• 实现效果

• 遇到的坑

• 几点说明

前言

因为近日在学习并使用VUE，客户有一个要求，要输入框可模糊查询并带有下拉提示的应用，数据从接口取。在网上找了下，找到了一些文章，很有用（但对于新手来说还是有不明白的地方）。

vue中输入框带搜索建议的应用

Vue 中使用Element Input组件实现输入后匹配输入建议

研究了一下，最后使用el-autocomplete 这个控件，实现这个功能。踩了几个坑，还犯了新手才会有的一些错误，最终解决了问题。

解决方案

先上代码。

控件代码

    <el-form-item label="客户"
                  prop="EntityName">
        <el-autocomplete
            clearable
            class="handle-input-width"
            v-model="searchForm.EntityName"
            value-key="nodeCnName"
            :fetch-suggestions="FilterEntityName"
            :tri