- 浏览: 70615 次
- 性别:
- 来自: 天堂的隔壁
最新评论
-
yundie8:
这个不兼容火狐啊
js实现输入框输入的自动匹配功能 -
崇拜快乐:
习惯 直接 innerHTML="" 的 ...
关于removeChild的使用 -
int08h:
while ($node.childeNodes.length ...
关于removeChild的使用 -
g00000:
我习惯用这段代码来删除。
<pre name=&quo ...
关于removeChild的使用 -
weick:
"在Demo中,调用接口open的代码必须在< ...
模拟弹出消息框
完成输入框输入的自动匹配功能。
参考:http://www.yisoutong.cn/html/?11112.html
这里增加了和输入拼音相对应的中文匹配。
如果能进一步完善,多谢指教。核心JS代码如下,DEMO见附件。
/** * 输入框的自动匹配核心控制类 * @param $fixDom 存放用于匹配的值的DIV对象 */ function InputAutoFix($aConfig){ var aConfig=$aConfig; var _msgEn=[]; //预先用于匹配的值,匹配值的拼音描述 var _msgCh=[]; //预先用于匹配的值,匹配值的中文描述 var _sb=null; //和输入值匹配的值 var _domCh=aConfig.fixDom; if(_domCh==null || typeof(_domCh)=="undefined"){ return; } var _canFix=false; //能否匹配 var _instance=null; var _key=null; var _inputDom=aConfig.inputDom; //输入框对象 var _index=0; //匹配容器中匹配值的索引 var _isNotOut=false; //匹配值索引是否超出匹配值的长度 var _currentValue=null; //当前输入框中的值 _domCh.style.visibility="hidden"; _domCh.style.position="absolute"; _domCh.style.zIndex="999"; _domCh.style.overflowY="auto"; _domCh.style.overflowX="hidden"; _domCh.style.height="50"; //初始化为50 this.beginHandleAuto=beginHandleAuto; this.directionKey=directionKey; // 针对匹配结果进行键盘操作的事件定义 this.doMouseover=doMouseover; //匹配值的onmouseover事件时的样式 this.doMouseout=doMouseout; //匹配值的onmouseout事件时的样式 this.doOnclick=doOnclick; //匹配值的onclick事件定义 this.item=item; //存储预先准备匹配的值 this.append=append; //把匹配的值加载到匹配值的容器中 this.display=display; //找到匹配值后显示存放匹配值的容器 this.setInstance=setInstance; //设置实例 function setInstance($instanceName,$aConfigInstance){ _instance=$instanceName; aConfig.instance=$aConfigInstance; } /** * 开始匹配 * @param $inputValue * @param $event */ function beginHandleAuto($inputValue){ _currentValue=$inputValue; if(_currentValue==""){ if(_domCh.style.visibility=="visible"){ _domCh.style.visibility="hidden"; } return; } var isEn=false; var regDirty=/^(\/|\?|\,)|\\/; //非法字符输入 if(regDirty.test(_currentValue)){ return; } var regChar=/^([A-Za-z])+$/i; //英文输入的匹配 var reg=new RegExp("^"+_currentValue+"","i"); //从开始位置进行匹配,忽略大小写 _canFix=false; // _isNotOut=true; _sb=[]; _domCh.innerHTML=""; //当前输入的是英文 if(regChar.test(_currentValue)){ isEn=true; } //对输入的值进行匹配 for(var i=0;i<_msgCh.length;i++){ //当前输入的是英文 if(isEn){ if(_msgEn.length>0){ if(reg.test(_msgEn[i])){ if(_msgCh[i]!=null){ append(_msgCh[i]);//显示和英文对应的中文 _canFix=true; } } } }else{ //输入中文进行匹配 if(_msgCh[i]!=null){ if(reg.test(_msgCh[i])){ append(_msgCh[i]); _canFix=true; } } } } //匹配后显示匹配容器 try{ display(); }catch(e){ alert("不能正常显示匹配容器:"+e.description); return; } //对匹配容器中的匹配值进行特殊的样式处理 if(_canFix){ if(event.keyCode==13 || event.keyCode==40 || event.keyCode==38){ //enter,down,up directionKey(); }else{ _index=0; _domCh.childNodes[_index].className="mouseover"; _isNotOut=true; } } }; /** * 把和输入的值匹配的匹配值加载到匹配容器中并显示 * @param $value 和输入的值相匹配的匹配容器中的匹配值 */ function append($value){ if($value==null){ return; } var fixValue=$value; _sb.push(fixValue); var divDom=document.createElement("DIV"); //对匹配的值进行鼠标事件的绑定,主要是改变样式 divDom.onmouseover=function(){doMouseover(this);} divDom.onmouseout=function(){doMouseout(this)}; divDom.onclick=function(){doOnclick(fixValue)}; //如果匹配,对输入框中的值进行加粗处理 var reg=new RegExp("("+_currentValue+")","i"); divDom.style.lineHeight="140%"; divDom.className="mouseout"; if(_currentValue){ divDom.innerHTML=$value.replace(reg,"<strong>$1</strong>"); //对匹配的字符进行加粗处理 } divDom.style.fontFamily="宋体"; _domCh.appendChild(divDom); }; /** * 针对匹配结果进行键盘操作的事件定义 : * 1、在匹配结果中向上移动光标 * 2、在匹配结果中向下移动光标 * 3、对合适的匹配结果进行enter的操作 * 注意: 各个匹配结果的索引的变化 */ function directionKey(){ var key=event.keyCode; var len=_domCh.childNodes.length; if(_index>len-1 || _index<0){ _isNotOut=false; } if(key==40 && _isNotOut){ //光标向下移动 _domCh.childNodes[_index].className="mouseout"; if(_index>=len-1){ _index=0; }else{ _index++; } try{ _domCh.childNodes[_index].className="mouseover"; }catch(e){ alert("key=40"+e.description); } } if(key==38 && _isNotOut){ //光标向上移动 _domCh.childNodes[_index].className="mouseout"; if(_index<=0){ _index=len-1; }else{ _index--; } try{ _domCh.childNodes[_index].className="mouseover"; }catch(e){ alert("key=38"+e.description); } } if(key==13){ //enter if(_domCh.childNodes[_index] && _domCh.style.visibility=="visible"){ _inputDom.value=_sb[_index]; _domCh.style.visibility="hidden"; } } if(!_isNotOut){ //重新初始化索引 _index=0; _domCh.childNodes[0].className="mouseover"; _isNotOut=true; } }; /** * 对匹配值所在的dom进行onmousever的事件样式处理 * @param $obj 匹配值所在的dom */ function doMouseover($obj){ var dom=$obj; if(_domCh.childNodes.length==0){ //return; }else{ _domCh.childNodes[_index].className="mouseout"; } _index=0; if(dom.tagName=="DIV"){ dom.className="mouseover"; }else{ dom.parentElement.className="mouseover"; } }; /** * 匹配值的onmouseout事件时的样式 * @param $obj */ function doMouseout($obj){ var dom=$obj; if(dom.tagName=="DIV"){ dom.className="mouseout"; }else{ dom.parentElement.className="mouseout"; } }; /** * 对匹配值的进行选择的onclick事件 * @param $msg 匹配容器中和输入值相匹配的值 */ function doOnclick($msg){ var v=$msg; if(_inputDom==null){ return; } _inputDom.value=v; //选定匹配值后隐藏显示匹配值的容器 _domCh.style.visibility="hidden"; }; //隐藏下拉面板 this.hideSel=hideSel; function hideSel(){ if(_domCh.style.visibility=="visible"){ _domCh.style.visibility="hidden"; } } /** * 存储用于匹配的值 * 如果值有多个,用,分隔 * @param $msg 用于匹配的值 * @param $tag 值类型的标记 */ function item($msg,$tag){ var items=$msg; if(items.indexOf(",")!=0){ var arrMsg=items.split(","); for(var i=0;i<arrMsg.length;i++){ if(arrMsg[i]!=null){ if("ch"==$tag){ //中文 _msgCh.push(arrMsg[i]); }else{ //和中文对应的拼音 _msgEn.push(arrMsg[i]); } } } }else{ if("ch"==$tag){ _msgCh.push(items); }else{ _msgEn.push(items); } } //@note: 因为要中文及其拼音对应,所以这里不再做排序处理 // _msgCh.sort(); // _msgEn.sort(); }; /** * 显示用于匹配的匹配容器 */ function display(){ if(_canFix && _currentValue!=null){ var dom=_inputDom; var x=0; var y=0; while(dom!=null){ x+=dom["offsetLeft"]; y+=dom['offsetTop']; dom=dom.offsetParent; } _domCh.style.left=x; _domCh.style.height=_msgCh.length+80; _domCh.style.width=_inputDom.offsetWidth; _domCh.style.top=y+22; _domCh.style.visibility="visible"; }else { _domCh.style.visibility="hidden"; } }; } /** * 自动匹配所用的dom对象配置 * @param $inputDom 匹配用的输入框对象 * @param $fixDomEn 存放中文匹配值div对象 * @param $fixDomCh 存放和中文相对应的英文匹配值的div对象 */ function AutoDomConfig($inputDom,$fixDom){ this.instance=null; //AutoDomConfig对象实例 this.css="autoFix.css"; this.inputDom=$inputDom; this.fixDom=$fixDom; } function AutoFix(){ this.init=init; var autoFix=null; var inputDom=null; var dom=null; var config=null; var msgCh=null; var msgEn=null; /** * 执行初始化操作 * @param $dom 输入框对象 * @param $fixDom 存放匹配值的对象 * @param $fixDomCh 存放匹配值的对象,一般是英文对应的中文 */ function init($dom,$fixDom,$msgCh,$msgEn){ dom=$fixDom; inputDom=$dom; msgCh=$msgCh; msgEn=$msgEn; config=new AutoDomConfig(inputDom,dom); var instance=inputDom.getAttribute("wc.instance"); autoFix=new InputAutoFix(config); autoFix.setInstance(instance,config); eval("window."+instance+"=autoFix"); __loadCss(config.css); if(msgCh!=null && msgCh.length>0){ autoFix.item(msgCh,"ch"); }if(msgEn!=null && msgEn.length>0){ autoFix.item(msgEn,"en"); } }; this.doHide=doHide; function doHide(){ if(autoFix==null){ return; } autoFix.hideSel(); } /** * 开始匹配 * @param $currentValue */ this.beginRender=beginRender; function beginRender($currentValue){ var currentValue=$currentValue; autoFix.beginHandleAuto(currentValue); } //加载CSS文件 function __loadCss($css) { var node = document.createElement("LINK"); node.rel = "Stylesheet"; node.type = "text/css"; node.href = $css; document.all.tags("HEAD")[0].appendChild(node); } } var auFix=new AutoFix();
- inputAutoFix.rar (4.2 KB)
- 下载次数: 94
发表评论
-
setTimeout中的this
2014-11-03 18:51 550var f = function(){ ... -
JSON对象转换为字串
2013-10-31 01:53 786JSON.stringrify的功能好强大(http:// ... -
开发跨浏览器javascript常见注意事项
2011-03-08 20:37 958转自:http://www.jb51.net/ar ... -
一个简单的日历控件
2010-11-15 16:58 1274附件提供了完整的演示文档。目前只支持IE。 var C ... -
关于removeChild的使用
2010-08-12 16:27 1203现在要删除一个父节点下的所有子。 删除节点的操作其实类似于F ... -
模拟弹出消息框
2010-08-03 19:51 1320模拟一个弹出消息框,有模式。核心接口是open,即弹出消息框, ... -
关于JS的类属性以及函数的调用
2010-07-20 16:50 1044function F(){ this.pro=fu ... -
JS中的多态
2010-06-25 16:19 2123感觉提高写JS的水平有点难,只能通过多写,多学,在工作中探索总 ...
相关推荐
本文将深入讲解如何使用JavaScript实现类似百度输入框的自动匹配功能。这个功能常见于搜索引擎、导航栏等,用户输入部分关键词后,系统会根据已有的数据提供匹配建议。 首先,我们需要理解自动匹配的基本原理。它...
在实际应用中,为了提高用户交互体验,我们常常需要为`dataGridView`的输入框添加自动提示、自动完成和自动补全功能。这些功能能够帮助用户更快地找到或输入他们想要的数据,减少错误输入的可能性。 自动提示...
在实现仿百度输入框自动匹配功能的示例代码中,作者提供了一段JavaScript代码,旨在演示如何通过用户输入来动态地匹配并显示...在实际开发中,开发者需要将这些知识点综合运用,才能实现用户友好的输入自动匹配功能。
在JavaScript的世界里,jQuery是一个非常流行...总的来说,jQuery输入框提示自动完成功能是通过监听用户输入,实时过滤数据并显示匹配项来实现的。这个功能在许多Web应用中都十分常见,能够极大地提升用户的交互体验。
在“自动匹配”的实现上,通常会涉及到JavaScript、Ajax以及后端编程。当用户在输入框中输入字符时,前端JavaScript代码会监听输入事件,一旦检测到用户输入,就会发送一个Ajax请求到服务器。这个请求携带当前的输入...
在网页开发中,输入框(Input)的自动匹配功能是一个常用且实用的交互设计,它可以帮助用户更快地找到或输入他们想要的内容。本例中,我们看到一个利用JavaScript实现的简单输入框自动匹配字符的示例。这个功能通常...
本项目旨在仿照谷歌和百度的样式,实现一个具有高效、易用的输入自动补全功能。 首先,我们要理解自动补全的基本原理。该功能通常基于用户在输入框中键入的部分字符,快速提供可能的匹配项列表。这个过程涉及两个...
标题中的“输入框自动完成功能”指的是在Web开发中,一种常见的用户界面特性,它允许用户在输入框中键入内容时,系统能够自动显示一个下拉列表,供用户选择匹配的建议项。这种功能通常用于提升用户体验,特别是在...
自动提示功能基于数据匹配原理,当用户在输入框中输入文字时,后台会实时检测输入内容,并与预设的数据集进行比对。如果找到匹配项,这些匹配项将作为提示信息展示给用户,通常以下拉列表的形式显示在输入框下方。 ...
本文将详细介绍 ASP.NET 可编辑输入自动匹配的下拉框的实现方法,该控件可以自动匹配用户输入的内容,并提供相关的下拉选项。本文将从三个方面介绍该控件的实现方法:首先,介绍如何在 ASP.NET 项目中添加 Telerik ...
"仿google输入框自动完成输入源码,js实现,方便使用" 描述进一步强调了这个功能是用JavaScript语言实现的,并且设计得易于使用。这意味着开发者可以轻松地将这个代码集成到他们的网站中,为自己的搜索框添加自动...
这个"AJAX+ASP实现输入框提示"的示例项目,旨在展示如何使用AJAX技术在ASP页面上创建一个智能提示系统,当用户在输入框中输入文字时,后台将实时搜索匹配的数据并显示为提示。这种功能在许多Web应用中非常常见,如...
在前端开发中,输入框自动匹配功能常见于搜索框,能够根据用户输入的内容实时展示匹配的选项。本问题要求使用原生JavaScript来实现这一功能,不依赖任何框架。下面将详细阐述如何满足各项要求: 1. **纯JavaScript...
通过以上技术的组合应用,我们可以在Java Web应用中实现输入框自动匹配功能,提供用户友好的交互体验。在具体实现时,可以根据项目需求选择合适的技术栈和库,例如使用Vue.js或React.js等现代前端框架,或者结合使用...
文本框输入自动匹配是指用户在文本输入框中键入字符时,系统会实时提供与输入内容相匹配的建议。这种功能广泛应用于地址输入、用户名查找、产品搜索等场景。实现方式通常是监听输入事件,对输入值进行处理,然后与...
输入框自动提示功能,通常被称为AutoComplete,其工作原理是:当用户在输入框中键入字符时,后台服务器会根据已输入的字符查询相关数据,并将匹配结果实时显示为下拉列表供用户选择。这种功能可以大大提高用户的输入...
综上所述,实现JavaScript输入框自动加载邮箱提示的功能涉及到监听用户输入、进行模糊匹配、动态生成提示元素以及优化性能等多个方面。通过以上步骤,我们可以构建出一个高效且用户体验良好的邮箱输入提示系统。
为了提升用户体验,许多网站会采用自动补全功能,帮助用户快速、准确地输入邮箱地址。jQuery库提供了一种简单且强大的方式来实现这个功能。本文将详细讲解如何利用jQuery实现输入框自动补全邮箱提示。 首先,我们...