vue Element ui中搜索的input框的封装

陈亦鸣

已于 2022-06-25 19:34:53 修改

阅读量379

点赞数 1

文章标签： vue.js ui javascript

于 2022-06-25 18:32:02 首次发布

本文链接：https://blog.csdn.net/tongzhe1236/article/details/125462701

版权

基于ElementUI组件进行修改，想看原代码可以看官网 ElementUI官网

//input框可以远程搜索
export function inputSearchable(queryString, cb, temp) {
    //下拉框需要选择的数据
    let restaurants = temp;
    let timeout = null
    // queryString:输入框所输入的值
    var results = queryString
        ? restaurants.filter(createStateFilter(queryString))
        : restaurants;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        cb(results);
    }, 1000 * Math.random());
}

export function createStateFilter(queryString) {
    //state:需要所搜的数据列表
    return (state) => {
        return (
            //toLowerCase:统一转化成小写
            //!== -1 可模糊查询
            state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        );
    };
}