基于mootools的动态字符串过滤器

2009-08-23 08:53:23 来源:查看 | 【大中小】

本程序可以直接在网页客户端根据指定的字符搜索字符串，本脚本程序是基于 mootools 库的。

下面提供了3个Demo：
demo1
demo2
demo3

设置程序
首先在网页<head>区包含相关脚本

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="dg-filter.js"></script>

在上面的demo中我们使用了一个文本框和一个无需列表(UL LI):
文本框代码：

<lable for="searchField">Search: </lable> <input type="text" id="dgSearchField">

列表代码

<ul id="listToBeFiltered">
 <li><span class="listItem">Europe</span>
  <ul>
   <li><span class="listItem">Norway</span></li>
   <li><span class="listItem">Denmark</span></li>
   <li><span class="listItem">Sweden</span></li>
   <li><span class="listItem">England</span></li>
   <li><span class="listItem">Germany</span></li>
   <li><span class="listItem">Spain</span></li>
  </ul>
 </li>
 <li><span class="listItem">Asia</span>
  <ul>
   <li><span class="listItem">China</span></li>
   <li><span class="listItem">Japan</span></li>
   <li><span class="listItem">South Korea</span></li>
   <li><span class="listItem">The Phillipines</span></li>
  </ul>
 </li>
 <li><span class="listItem">North America</span>
  <ul>
   <li><span class="listItem">Canada</span></li>
   <li><span class="listItem">United States</span></li>
   <li><span class="listItem">Mexico</span></li>
  </ul>
 </li>
 <li><span class="listItem">South America</span>
  <ul>
   <li><span class="listItem">Argentina</span></li>
   <li><span class="listItem">Brazil</span></li>
  </ul>
 </li>
</ul>

在网页的最后添加以下代码，设置代码功能

<script type="text/javascript">
var filter = new DG.Filter({
  filterField : $('dgSearchField'),
  filterEl : $('listToBeFiltered'),
  xPathFilterElements : '.listItem',
  onMatchShowChildren : true
});
</script>

下载"基于mootools的动态字符串过滤器"

推荐给朋友

上一篇：通过getElementById动态改变光标样式
下一篇：精品美发网四图焦点图片切换效果

基于mootools的动态字符串过滤器

下载"基于mootools的动态字符串过滤器"

相关资源