一个简单的使用javascript实现的，根据用具输入,动态过滤页面显示内容的小程序。使用了正则表达式匹配用户输入，忽略前后空格，忽略大小写，兼容IE6.0和Firefox2.0。
前阵子没事的时候做着玩得，当时只在IE下实现，今天修改了一下，兼容firefox，还费了一番功夫。没办法，现在做的项目只要求IE,结果就对兼容性的东西了解的不是很多，看来以后还要努力啊。哈哈。
下面是完整的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>textFilter</title> <script type="text/javascript"> var folderE = null; var filterE = null; var iniVars = null;
function init(){ folderE = document.getElementById("folder"); filterE = document.getElementById("filter"); getIniVars(); }
//使用正则表达式来匹配,忽略前后空格，忽略大小写，兼容IE6.0和Firefox2.0 function filter(){ var filterValue = trim(filterE.value); var folderLength = folderE.childNodes.length; var pattern = new RegExp("^"+filterValue,"i"); for (var i = 0;i < folderLength;i++) { folderE.removeChild(folderE.childNodes[folderLength-1-i]); } for (var i = 0;i<iniVars.length;i++) { if (pattern.test(trim(iniVars[i]))) { var aLi = document.createElement("LI"); //innerText只有IE支持，所以这里用 aLi.innerHTML = trim(iniVars[i]); folderE.appendChild(aLi); } } }
function getIniVars(){ iniVars = new Array(); var j = 0; for (var i = 0;i<folderE.childNodes.length;i++) { if (folderE.childNodes[i].childNodes[0] != null) { iniVars[j] = folderE.childNodes[i].childNodes[0].nodeValue; j++; } } }
function trim(x){ return x.replace(/(^/s*)|(/s*$)/g, ""); } </script> </head> <body onLoad="init()"> <div style="width:200px;float:left;">implement js filter function</div> <div style="float:left;width:100px;"> <input type="text" name="filter" onKeyUp="filter()" id="filter" /> </div> <div style="clear:both;"></div> <ul id="folder"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ab</li> <li>bc</li> <li>ca</li> <li>ac</li> <li>ba</li> <li>cb</li> </ul> </body></html>
