一個簡單的使用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>
