您的位置：首页 > 移动开发 > 微信开发

一个简单的用javascript实现的页面内容过滤显示小程序源码

2007-01-09 13:28 981 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript filter 正则表达式 firefox function null

相关文章推荐

新的分享

章节导航