一个简单的使用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>