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 }