2012/11/12 13:00:08作者:佚名来源:网络
【实例名称】
Ajax效果的字符串过滤
【实例描述】
在Microsoft提供的Ajax框架中,有个根据第一个字母选择单词的过滤实例。本例将学习如何使用正则实现这种效果。
【实例代码】
<HTML><HEAD><TITLE>过滤字符实例-学无忧(www.xue51.com)</title> <script type="text/javascript"> function filterlist(selectobj) { // 过滤对象 this.selectobj = selectobj;
//要过滤得字符-i表示忽略大小写,""表示不忽略 this.flags = 'i'; // 要过滤的项-选择是文本还是值 this.match_text = true; this.match_value = false; //调试参数 this.show_debug = false; //初始化的方法 this.init = function() { if (!this.selectobj) return this.debug('没有实现过滤的控件'); if (!this.selectobj.options) return this.debug('过滤控件中没有内容'); //制作选择项的副本 this.optionscopy = new Array(); if (this.selectobj && this.selectobj.options) { for (var i=0; i < this.selectobj.options.length; i++) { // 创建一个新的选择项对象 this.optionscopy[i] = new Option(); // 设置选择项的文本 this.optionscopy[i].text = selectobj.options[i].text; // 设置选择项的值 if (selectobj.options[i].value) { this.optionscopy[i].value = selectobj.options[i].value; } else { this.optionscopy[i].value = selectobj.options[i].text; } } } } this.reset = function() { //重置选择项 this.set(''); }
//实现过滤的方法 this.set = function(pattern) { var loop=0, index=0, regexp, e; if (!this.selectobj) return this.debug('没有实现过滤的控件'); if (!this.selectobj.options) return this.debug('过滤控件中没有内容');
// 清空列表中的内容 this.selectobj.options.length = 0;
// 使用正则实现字符过滤-初始化正则 try { regexp = new RegExp(pattern, this.flags);
} catch(e) { if (typeof this.hook == 'function') { this.hook(); } return; } // 循环添加过滤后的结果 for (loop=0; loop < this.optionscopy.length; loop++) { // 定义选择项 var option = this.optionscopy[loop]; // 实现正则式过滤 if ((this.match_text && regexp.test(option.text)) || (this.match_value && regexp.test(option.value))) { // 使用过滤结果创建新选择项
this.selectobj.options[index++] = new Option(option.text, option.value, false); } } if (typeof this.hook == 'function') { this.hook(); } }
//设置正则表达式的过滤标志 this.set_ignore_case = function(value) { if (value) { this.flags = 'i'; } else { this.flags = ''; } } this.debug = function(msg) { //调试方法 if (this.show_debug) { alert('过滤结果: ' + msg); } } this.init(); //调用初始化方法 } </script> </HEAD> <BODY> <H1>过滤字符实例</H1> <FORM name=myform action=""><SELECT size=5 name=myselect> <OPTION>Aefdf Rsses<OPTION>Lbadmn Adjlf<OPTION>Monica Betty<OPTION>Daniel Jack<OPTION>Bill Gayes<OPTION>Lama Tampel<OPTION>Natty Lees<OPTION>Harry J. Leoo<OPTION>Matty McColm<OPTION>Carrie-Anne Moss<OPTION>Collin Chou<OPTION>Genevieve O'Reilly<OPTION>Harold Perrineau Jr.<OPTION>Jada Pinkett Smith<OPTION>Adrian Rayment<OPTION>Neil Rayment<OPTION>Bruce Spence<OPTION>Hugo Weaving<OPTION>Lambert Wilson<OPTION>Anthony Wong</OPTION></SELECT> <SCRIPT type=text/javascript> var myfilter = new filterlist(document.myform.myselect); //调用过滤的方法 </SCRIPT> <P>过滤: <A title="Clear the filter" href="javascript:myfilter.reset()">重置</A> <A title="Show items starting with A" href="javascript:myfilter.set('^A')">A</A> <A title="Show items starting with B" href="javascript:myfilter.set('^B')">B</A> <A title="Show items starting with C" href="javascript:myfilter.set('^C')">C</A> <A title="Show items starting with D" href="javascript:myfilter.set('^D')">D</A> <A title="Show items starting with E" href="javascript:myfilter.set('^E')">E</A> <A title="Show items starting with F" href="javascript:myfilter.set('^F')">F</A> <A title="Show items starting with G" href="javascript:myfilter.set('^G')">G</A> <A title="Show items starting with H" href="javascript:myfilter.set('^H')">H</A> <A title="Show items starting with I" href="javascript:myfilter.set('^I')">I</A> <A title="Show items starting with J" href="javascript:myfilter.set('^J')">J</A> <A title="Show items starting with K" href="javascript:myfilter.set('^K')">K</A> <A title="Show items starting with L" href="javascript:myfilter.set('^L')">L</A> <A title="Show items starting with M" href="javascript:myfilter.set('^M')">M</A> <A title="Show items starting with N" href="javascript:myfilter.set('^N')">N</A> <A title="Show items starting with O" href="javascript:myfilter.set('^O')">O</A> <A title="Show items starting with P" href="javascript:myfilter.set('^P')">P</A> <A title="Show items starting with Q" href="javascript:myfilter.set('^Q')">Q</A> <A title="Show items starting with R" href="javascript:myfilter.set('^R')">R</A> <A title="Show items starting with S" href="javascript:myfilter.set('^S')">S</A> <A title="Show items starting with T" href="javascript:myfilter.set('^T')">T</A> <A title="Show items starting with U" href="javascript:myfilter.set('^U')">U</A> <A title="Show items starting with V" href="javascript:myfilter.set('^V')">V</A> <A title="Show items starting with W" href="javascript:myfilter.set('^W')">W</A> <A title="Show items starting with X" href="javascript:myfilter.set('^X')">X</A> <A title="Show items starting with Y" href="javascript:myfilter.set('^Y')">Y</A> <A title="Show items starting with Z" href="javascript:myfilter.set('^Z')">Z</A> </P></FORM></BODY></HTML>
【运行效果】
【难点剖析】
本例的重点是使用正则表达式实现字符的过滤,还实现了动态添加列表项的功能。代码中使用“new”关键字创建了RegExp对象,其用来提供简单的正则表达式支持功能。使用RegExp对象的“test”方法,可以对指定的字符串执行一个正则表达式搜索,并返回一个布尔值指示是否找到匹配的模式。当搜索到结果时就使用“new Option”动态创建一个列表项,同时添加到列表中。
【源码下载】
为了JS代码的准确性,请点击:Ajax效果的字符串过滤 进行本实例源码下载
标签: 字符串
相关文章
ip雷达 v5.0.2绿色版
详情WinSCPv5.15.1绿色中文版
详情filezilla client v5.5
详情wireshark中文版 v3.4.9
详情Boson Netsimv10.8破解版
详情风行播放器 v3.0.6.106
详情爱奇艺客户端 v10.1.0.6636官方版
详情搜狐影音 v7.0.19.0官方版
详情乐视视频 v7.3.2.192
详情华数tv客户端PC版 v1.1.2.0
详情cbox央视影音 v5.1.2.1经典版
详情软媒收音机(魔方) v1.13
详情倾听网络收音机 v3.0.0.0
详情魅影流声全球网络收音机 v1.0.0.1
详情酷狗电台 v8.2.75
详情暴龙网络收音机 v2.5.1
详情克莉2v1.0中文版
详情冬日计划v1.2中文版
详情刺客信条英灵殿v1.0吾爱破解版
详情刺客信条英灵殿终极v1.0免安装破解版
详情动物森友会v1.10.0最新破解版
详情哈迪斯杀出地狱v1.37中文破解版
详情嗜血印中文豪华版v1.0豪华版破解版 附游戏攻略秘籍
详情城市战斗v1.0中文破解版
详情尼尔人工生命v1.0steam免费破解版
详情尼尔人工生命升级版v1.0PC破解版
详情尼尔人工生命升级版v1.2247中文破解版
详情层层恐惧2中文破解版v1.0绿色免安装版
详情往日不再v1.0 steam破解版
详情往日不再v1.0pc破解版
详情救赎之路v1.0中文破解版
详情斯盖尔女仆v1.0中文破解版
详情新盗墓笔记官方版v1.215.589730
详情无尽的拉格朗日无限金币钻石版v1.2.267172破解版
详情明日之后无限小太阳版v1.0.246安卓版
详情双生幻想vivo版v6.6.83安卓版
详情剑网1归来内购免费版v1.1.116安卓版
详情模拟城市我是市长国际版v0.69.21342.22832安卓版
详情迷你世界999999迷你币版v1.20.5破解版
详情王牌战争无限内购版v9.7安卓版
详情云上城之歌不氪金版v10.16安卓版
详情王铲铲的致富之路破解版v1.1.8安卓版
详情创造与魔法无限点券版v1.0.0505安卓版
详情狩猎使命九游版v1.6.6.000
详情魔镜物语变态版v2.1.4无限金币版
详情黑月手游免费版v2.2.0安卓版
详情曙光英雄v1.0.12.0.20无限钻石版
详情原始传奇无限元宝版v1.6.806内购破解版
详情