php input输入数据自动匹配,input输入框的自动匹配(原生代码)

JS

input输入框的自动匹配(原生代码)

作者: 来源:www.28hudong.com2013-03-29 23:09:06

阅读次

今天看群里有人发起了人人网以前一些面试题,我以前也转载过一些,恰好闲着,挑选一题来做做,练个手。 本题有以下要求: 1. 使用原生代码实现,不可使用任何框架; 2. 对 input框中输入的字符进行匹配,将匹配到的内容以菜单的形式展现在 input框的下方; 3. 只针对英文字符进行匹配,并且匹配到的内容在菜单中加粗; 4. 通过键盘上的上下箭头可以对菜单进行选择,按下回车后将选中的内容写入到 input框中; 思 路 捕捉输入变化,用用户输入的值(下称输入值)去匹配列表项,这里假设列表项是查询返回的一个数组(下称列表),匹配方式为用输入值作为开始值匹配每个列表值,将符合筛选条件的项输出到页面。 分 析 第三点要求中关键字是加粗,这里用正则替换就好了。 第四点要求的关键字就比较多了,一句话暗藏许多杀机,这一部分主要是针对键盘,首先是上下按键,然后是回车,还有一个写入到input框。 到这,如果你认为完了那就操之过急了,至少还有4个隐性的需求。 •第一项默认高亮显示,上下按键的同时当前项高亮。 •按下Enter默认第一项被选中。 •鼠标经过时当前项高亮。 •支持点击选中项。 也许还有所遗漏,这里就不纠结了。 实 践 这虽然是一道JS题,但这之前,页面结构还是要先写好。 复制代码 代码如下:

由于不允许用框架,这里对一些可能要到的方法作一个简单的封装。 首先创建一个封装对象,暂且取名 dom,接下来的原生方法都放进这个对象以作复用。 复制代码 代码如下: var dom = { $ : function( id ){ return document.getElementById(id); }, tag : function( tagName,root ){ root = root ? root : document; return this.makeArray( root.getElementsByTagName(tagName) ); }, bind : function( element,type,handler ){ if( document.addEventListener ){ element.addEventListener( type,handler,false ); }else if( document.attachEvent ){ element.attachEvent( 'on' + type,handler ); }; }, removeClass : function( list,name ){ var el = list[i], r = new RegExp('\s*\b' + name + '\b\s*','g'); for( var i = 0 , len = list.length ; i < len ; i++ ){ var cur = list[i]; if( r.test( cur.className ) ){ cur.className = cur.className.replace(r,''); }; }; }, height : function( element ){ return element.offsetHeight; }, getBound : function( element ){ return element.getBoundingClientRect(); }, getText : function( element ){ return element.textContent ? element.textContent : element.innerText; }, trim : function( string ){ return string.replace( /^s*(.*)s*$/,'$1' ); }, makeArray : function( tagList ){ for( var i = 0 , arr = [] , len = tagList.length ; i < len ; i++ ){ arr.push( tagList[i] ); }; return arr; }, isVisible : function( element ){ return element.style.display == 'block'; } }; 接着再创建一个对象,用于存放具体的处理逻辑,作者英文比较狗血,就叫autoMatch吧。 这个对象要做的事情可多了: •确定好菜单的位置; •实时处理用户输入; •处理鼠标和键盘按键动作; 确定菜单的位置 用封装对象dom的getBound方法,返回一个边界对象,此对象有两个属性left和top。眼熟吧,它类似jQuery里的offset()方法。 处理用户输入这里值得一提,由于是实时处理,开始考虑用onchange事件,但是它只会在失去焦点时才触发,所以是不合理的。 这时我的目光转向了oninput,它完全能够胜任工作。 复制代码 代码如下: dom.bind( obj.input,'input' , this.inputProcess ); 可是,IE又做了一回不走寻常路的事儿。它并不支持oninput。 空欢喜一场,白瞎了! 凡事总是有转机的。角落里的onpropertychange向我们缓缓走来…,它和oninput非常相似,有着一样的特性,至少在捕捉input输入方面,正是我想要的,对付IE,我们都用它,用了都说好。 再绑定一次: 复制代码 代码如下: dom.bind( obj.input,'propertychange' , this.inputProcess ); 接下来是按键,上,下,回车。对应的键编码分别是38、40、13,唯一需要注意的是FF和IE的属性名称不一样。 详细的实现细节见Demo: 猛击我查看Demo 真实业务场景中,可能要对用户的输入作实时Ajax查询,这代表着每敲一个字母都会有一次查询。 然而如此频繁发送Ajax请求实在太不划算,响应速度上也不容许这样的实现。 我的思路是当用户敲第一个字母时,发送一次请求(请求数据一般有数量限制,一般是10条),并将返回值储存起来(下称缓存)。 在第一个字母之后的用户输入,都在缓存里面筛选,到这里就如同本地查询一样了,每输入一个字母,精确度越来越高,缓存越来越小。 当用户清空,重新输入时重复以上的步骤。 当然,不排除会有一些更加复杂的业务场景,比如,在匹配充足的情况下,要保证用户每次输入都有10条数据可选,这就需要更多的判断以及请求。 所以,具体实现取决于真实的业务场景。 至此,本文结束。感谢阅读,欢迎有血有肉的置评。

推荐阅读

今天在修改原群组弹窗的时候,发现弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样.逐一排查,肯定是在计算窗口位置的时候,少加了scrollTop这个值.在查看源代码的时候发现直接采用document.documentElement.s>>>详细阅读

地址:http://www.17bianji.com/kaifa2/JS/22207.html

关键词:

探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

2658137698f1cfd846239361e17c0f16.png网友点评

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值