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

最新推荐文章于 2025-09-24 18:24:12 发布

原创最新推荐文章于 2025-09-24 18:24:12 发布 · 5.7k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Vue中使用el-autocomplete组件实现输入框模糊查询并带有下拉提示的功能，包括遇到的问题及解决方案。重点是接口数据格式、value-key的设定、过滤方法和选择方法的实现。

前言

解决方案

实现效果

遇到的坑

几点说明

前言

因为近日在学习并使用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"
            :trigger-on-focus="true"
            placeholder="客户"
            @clear="blurForBug()"
            @select="handleSelect"
        >
    </el-autocomplete>

事件代码

    data() {
        return {
            EntityNameList: [],
            searchForm: { 
                EntityName: '',
            },
        }
    },
    methods: {
        // 初始化获取所有下拉列表数据
        GetDropdownListItems() {
            apiGet('/V1/api/Common/GetDropdownList', null, 8000).then(
                (res) => {
                    if (res.code == 200) {
                        // 客户
                        this.EntityNameList = res.data.EntityNameList;
                    } else {
                        Message.error(res.message)
                    }
                }
            )
        },

        // 客户
        FilterEntityName(queryString, cb) {
            var EntityNameList2 = this.EntityNameList;
            var results = queryString
                ? EntityNameList2.filter(this.createFilter(queryString))
                : EntityNameList2;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        // 只要该输入内容的都匹配
        createFilter(queryString) {
            return (res) => {
                return (res.nodeCnName.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
            };
        },
        // 最终选择的数据
        handleSelect(val){
            console.log(val)
            this.searchForm.EntityName = val.nodeCnName
        },
        // 点击clearable清空小图标按钮以后，继续重新在输入框中输入数据，querySearch会触发，但是cb函数不会触发
        // 这样的话就会出现发请求了，也获取数据了，但是input框的输入建议下拉框不呈现在页面上的问题，所以解决方法就是
        // 只要用户点击了clearable清空按钮以后，就让当前获取焦点的输入框失去焦点，回到最初状态，一切重新开始
        blurForBug(){
            document.activeElement.blur()
        },
    },

实现效果

点击输入框时

输入部分名称时

选择后

遇到的坑

下面说一下我遇到的坑，

输入文字后下拉框里空白

查了下接口，数据过来了，后台接口传的是个List<string> 页面初始化时接到了两条数据，但就是不显示，自查了代码及上网查了下，找到了下面的结果，

element 自动搜索 el-autocomplete，不显示结果

OK，原来是接口不能只传字符串数组，必须要传带有结构的数据，VUE接到的是JSON，改了下接口，自己定义了结构，VUE接收到的结果如下，其实只要有一个名称属性（nodeCnName）就好。

[
    {
        "nodeCnName": "阿里七七没限公司",
        "nodeId": "阿里七七没限公司",
    },
    {
        "nodeCnName": "企鹅没限公司",
        "nodeId": "企鹅没限公司",
    }
]

控件中定义一下 value-key="nodeCnName"，就是指定需要显示哪个字段。

过滤方法（createFilter）里要用，res.nodeCnName ，要不会报错。

选择方法（handleSelect）里要用 val.nodeCnName，

因为这个控件里的数据源，是记录数组，这两个方法里用到的是单条记录中的nodeCnName 属性。