前端搜索功能

需求：一般下拉框之类的会有搜索功能，不能每次都让后台返回，所以直接第一次把数据存下来，然后前端进行搜索

 

方法：

{
    event:'input',
    selector:'.auto-select-text',
    callback:_.debounce(function (context) {
        console.log('输入框输入了  ',$(context))
        this.actions.onInput($(context));//监听搜索框输入
    }, 500)
}

 

 

//1、输入数据时筛选符合条件的数据 2、如果输入的数据被删除即显示全部数据

onInput:function(input){
    let value = _.trim(input.val());
    input.val(value);
    if (value!==''){
        let searchResult = {};
        let option=[]
        for(let key in this.data.buildinData){
            if (input.attr('field')==key){
                let item = this.data.buildinData[key];
                for(let i=0;i<item.length;i++){//筛选符合条件的数据
                    if(item[i]['label'] && item[i].label.includes(value)) {
                        option.push(item[i])
                        searchResult={
                            key:key,
                            option:option
                        };
                    } else if(item[i]['py'] && item[i]['py'].includes(value)) {
                        option.push(item[i])
                        searchResult={
                            key:key,
                            option:option
                        };
                    }
                }
            }
        }
        this.actions.renderSelectOption(searchResult)//把符合条件的总数据重新加载
    }
    else {
        //如果输入了又删除数据，显示全部数据
        let field = input.attr('field');
        console.log('input.attr(\'field\')',input.attr('field'))
        if (this.data.personBuildin.key==field) {
            this.actions.renderSelectOption(this.data.personBuildin)
        }
        else if (this.data.companyBuildin.key==field){
            this.actions.renderSelectOption(this.data.companyBuildin)
        }
    }
},