zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

JavaScript搜索列表 请求 服务端
2023-09-27 14:21:17 时间

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

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

效果图:

html: 

 1 <div class="contracts-header">名称: <input type="text" value="" id="search_contract_name"></div>
 2 <div class="contracts-header">代码: <input type="text" value="" id="search_contract_code" placeholder="不区分大小写"></div>
 3 <div class="contracts-header"><button onclick="search()">查找</button></div>
 4 
 5 <div id="contracts-list">
 6    <ul>
 7     <li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li>
 8     <li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li>
 9    </ul>
10 </div>

javascript:

 1 function search()
 2 {
 3     var search_contract_name = $("#search_contract_name").val();
 4     var search_contract_code = $("#search_contract_code").val();
 5 
 6     if (search_contract_name && search_contract_code) { //两个输入框都有值
 7         search_contract_code = search_contract_code.toLowerCase(); //不区分大小写, 全部转换为小写, 下同
 8         $("input[name='contract[]']").each(
 9                 function () {
10                     var code_name = this.value;
11                     var search_code = code_name.toLowerCase().indexOf(search_contract_code); 
12                     var search_name = code_name.toLowerCase().indexOf(search_contract_name);
13                     if (search_code >=0 && search_name >=0 ) {
14                         //  this.nextSibling.style.backgroundColor = "#FFDEAD"; //高亮匹配到的
15                         this.parentNode.style.display = 'block';
16                     } else {
17                         //  this.nextSibling.style.backgroundColor = "";
18                         this.parentNode.style.display = 'none'; //隐藏不匹配的
19                     }
20                 }
21         );
22     } else if(search_contract_name || search_contract_code) { //只有一个输入框有值
23         search_contract_name = search_contract_name.length ? search_contract_name : 'xxx'; //默认为xxx是因为不可能存在xxx
24         search_contract_code = search_contract_code.length ? search_contract_code.toLowerCase() : 'xxx';
25         $("input[name='contract[]']").each(
26             function () {
27                 var code_name = this.value;
28                 var search_code = code_name.toLowerCase().indexOf(search_contract_code);
29                 var search_name = code_name.toLowerCase().indexOf(search_contract_name);
30                 if (search_code >=0 || search_name >=0 ) {
31                     //  this.nextSibling.style.backgroundColor = "#FFDEAD";
32                     this.parentNode.style.display = 'block';
33                 } else {
34                     //  this.nextSibling.style.backgroundColor = "";
35                     this.parentNode.style.display = 'none';
36                 }
37             }
38         );
39     }
40 }

 

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

另一个版本:

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

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

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

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

 1 function getInputsForFilter (id, tagName) {
 2     let data = {};
 3     let arrTagName = tagName.split(',');
 4     for (let j=0; j<arrTagName.length; j++) {
 5         let tname = arrTagName[j];
 6         let inputs = document.getElementById(id).getElementsByTagName(tname);
 7         console.log(inputs);
 8 
 9         for (let i=0; i<inputs.length; i++) {
10             let k = inputs[i].name;
11             let v = inputs[i].value;
12 
13             if (tname === 'select') {
14                 console.log(inputs[i]['selectedOptions'][0].innerText);
15                 v = inputs[i]['selectedOptions'][0].innerText;
16             }
17 
18             data[k] = v;
19         }
20     }
21     console.log(data);
22     return data;
23 }
View Code

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

 1 function listFilter(inputsId, listId) {
 2     let inputs = getInputsForFilter(inputsId, 'input,select');
 3 
 4     //取出非空的条件
 5     let params = [];
 6     for (let i in inputs) {
 7         if (inputs[i].length !== undefined && inputs[i].length > 0) {
 8             params.push({name:i,value:inputs[i]});
 9         }
10     }
11     console.log(params);
12 
13     //获取所有行
14     let trList = document.getElementById(listId).getElementsByTagName('tr');
15 
16     if (params.length === undefined || params.length === 0) { //没有筛选条件, 所有的行都显示
17         for (let i=1; i<trList.length; i++) {
18             let tr = trList[i];
19             tr.style.display = '';
20         }
21     } else {
22         for (let i=0; i<trList.length; i++) {
23             let tr = trList[i];
24             let tds = tr.getElementsByTagName('td');
25 
26             let txt = {}; //存储每个td的文字内容
27             for (let j=0; j<tds.length; j++) {
28                 let colName = tds[j].getAttribute('data-col');
29                 txt[colName] = tds[j].innerText;
30             }
31 
32             let pos = 0;
33             for (let j=0; j<params.length; j++) {
34                 let name = params[j]['name'];
35                 if (txt[name] !== undefined) {
36                     pos = txt[name].indexOf(params[j]['value']); //跟筛选条件做对比
37                     if (pos === -1) {
38                         break; //有一个匹配不上就退出, 此行不显示
39                     }
40                 }
41             }
42 
43             if ( pos === -1) {
44                 tr.style.display = 'none';
45             } else {
46                 tr.style.display = '';
47             }
48         }
49     }
50 
51 }
View Code