下拉搜索的js实现

场景

下拉选择根据用户实时输入进行搜索并回显

分析

• 监听输入变动，有变动时获取最新输入值
• ajax远程查询
• 回显查询结果

这样实现了根据用户输入进行查询并回显，但有个问题，用户用户每变动一次输入就进行一次耗时查询，可能用户还没有输入完想要查询的key,查询出来的结果也不是准确的，这样明显浪费了网络资源

优化

• 监听输入变动，有变动时获取最新输入值
• 设置等待500毫秒查询函数
• 如果在500毫秒内如果搜索值有变动，则清除查询函数，并记录最新值
• 直到500毫秒内没有输入，再去执行查询函数 并回显

具体实现

let timeout;
let currentValue;

function search(value,callback){
    if(timeout){
        clearTimeout(timeout);
        timeout = null;
    }

    currentValue = value;

    function loadData(){
        axios.get('your url?value='+value, {})
        .then(function (res) {
            if (res.code === 0) {
                let data = res.data;
                const selectData = [];
                data.map(m => {
                    selectData.push({
                        text: m.title,
                        value: m.value
                    })
                });
                callback(selectData);
            }
        });
    }

    setTimeout(loadData, 500);
}

function searchHandler(newValue){
    search(newValue,data=>console.log(data))
}