javascript 列表搜索, 不请求服务端

2015年12月22日 15:45:08 星期二

情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉

效果图:

html: 

<div class="contracts-header">名称: <input type="text" value="" id="search_contract_name"></div>
<div class="contracts-header">代码: <input type="text" value="" id="search_contract_code" placeholder="不区分大小写"></div>
<div class="contracts-header"><button onclick="search()">查找</button></div>

<div id="contracts-list">
   <ul>
    <li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li>
    <li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li>
   </ul>
</div>

javascript:

function search()
{
    var search_contract_name = $("#search_contract_name").val();
    var search_contract_code = $("#search_contract_code").val();

    if (search_contract_name && search_contract_code) { //两个输入框都有值
        search_contract_code = search_contract_code.toLowerCase(); //不区分大小写, 全部转换为小写, 下同
        $("input[name='contract[]']").each(
                function () {
                    var code_name = this.value;
                    var search_code = code_name.toLowerCase().indexOf(search_contract_code); 
                    var search_name = code_name.toLowerCase().indexOf(search_contract_name);
                    if (search_code >=0 && search_name >=0 ) {
                        //  this.nextSibling.style.backgroundColor = "#FFDEAD"; //高亮匹配到的
                        this.parentNode.style.display = 'block';
                    } else {
                        //  this.nextSibling.style.backgroundColor = "";
                        this.parentNode.style.display = 'none'; //隐藏不匹配的
                    }
                }
        );
    } else if(search_contract_name || search_contract_code) { //只有一个输入框有值
        search_contract_name = search_contract_name.length ? search_contract_name : 'xxx'; //默认为xxx是因为不可能存在xxx
        search_contract_code = search_contract_code.length ? search_contract_code.toLowerCase() : 'xxx';
        $("input[name='contract[]']").each(
            function () {
                var code_name = this.value;
                var search_code = code_name.toLowerCase().indexOf(search_contract_code);
                var search_name = code_name.toLowerCase().indexOf(search_contract_name);
                if (search_code >=0 || search_name >=0 ) {
                    //  this.nextSibling.style.backgroundColor = "#FFDEAD";
                    this.parentNode.style.display = 'block';
                } else {
                    //  this.nextSibling.style.backgroundColor = "";
                    this.parentNode.style.display = 'none';
                }
            }
        );
    }
}

2020-5-13 10:30:18 星期三

另一个版本:

支持模糊筛选, 支持select筛选; 限制: 搜索前, 保证页面里的数据都加载完毕

1. 首先要求数据列表是用table标签显示的

2. 每个td都有一个属性 data-col 他的值跟对应表单input/select 的name属性一致

js-1: 点击搜索时, 获取筛选条件;

function getInputsForFilter (id, tagName) {
    let data = {};
    let arrTagName = tagName.split(',');
    for (let j=0; j<arrTagName.length; j++) {
        let tname = arrTagName[j];
        let inputs = document.getElementById(id).getElementsByTagName(tname);
        console.log(inputs);

        for (let i=0; i<inputs.length; i++) {
            let k = inputs[i].name;
            let v = inputs[i].value;

            if (tname === 'select') {
                console.log(inputs[i]['selectedOptions'][0].innerText);
                v = inputs[i]['selectedOptions'][0].innerText;
            }

            data[k] = v;
        }
    }
    console.log(data);
    return data;
}

js-2: 遍历tr标签, 进行过滤

function listFilter(inputsId, listId) {
    let inputs = getInputsForFilter(inputsId, 'input,select');

    //取出非空的条件
    let params = [];
    for (let i in inputs) {
        if (inputs[i].length !== undefined && inputs[i].length > 0) {
            params.push({name:i,value:inputs[i]});
        }
    }
    console.log(params);

    //获取所有行
    let trList = document.getElementById(listId).getElementsByTagName('tr');

    if (params.length === undefined || params.length === 0) { //没有筛选条件, 所有的行都显示
        for (let i=1; i<trList.length; i++) {
            let tr = trList[i];
            tr.style.display = '';
        }
    } else {
        for (let i=0; i<trList.length; i++) {
            let tr = trList[i];
            let tds = tr.getElementsByTagName('td');

            let txt = {}; //存储每个td的文字内容
            for (let j=0; j<tds.length; j++) {
                let colName = tds[j].getAttribute('data-col');
                txt[colName] = tds[j].innerText;
            }

            let pos = 0;
            for (let j=0; j<params.length; j++) {
                let name = params[j]['name'];
                if (txt[name] !== undefined) {
                    pos = txt[name].indexOf(params[j]['value']); //跟筛选条件做对比
                    if (pos === -1) {
                        break; //有一个匹配不上就退出, 此行不显示
                    }
                }
            }

            if ( pos === -1) {
                tr.style.display = 'none';
            } else {
                tr.style.display = '';
            }
        }
    }

}