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 = '';
             }
         }
     }

 }