input输入框的自动匹配(原生代码)
2024-05-06 14:19:14
供稿：网友
今天看群里有人发起了人人网以前一些面试题，我以前也转载过一些，恰好闲着，挑选一题来做做，练个手。
本题有以下要求：
1. 使用原生代码实现，不可使用任何框架；
2. 对 input框中输入的字符进行匹配，将匹配到的内容以菜单的形式展现在 input框的下方；
3. 只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗；
4. 通过键盘上的上下箭头可以对菜单进行选择，按下回车后将选中的内容写入到 input框中；
思 路
捕捉输入变化，用用户输入的值（下称输入值）去匹配列表项，这里假设列表项是查询返回的一个数组（下称列表），匹配方式为用输入值作为开始值匹配每个列表值，将符合筛选条件的项输出到页面。
分 析
第三点要求中关键字是加粗，这里用正则替换就好了。
第四点要求的关键字就比较多了，一句话暗藏许多杀机，这一部分主要是针对键盘，首先是上下按键，然后是回车，还有一个写入到input框。
到这，如果你认为完了那就操之过急了，至少还有4个隐性的需求。
•第一项默认高亮显示，上下按键的同时当前项高亮。
•按下Enter默认第一项被选中。
•鼠标经过时当前项高亮。
•支持点击选中项。
也许还有所遗漏，这里就不纠结了。
实 践
这虽然是一道JS题，但这之前，页面结构还是要先写好。
代码如下:
<div id="wrap">
<input type="text" id="put" />
</div>
<div id="menu">
<div>
<ul id="output">
<li>占位</li>
<li>占坑</li>
</ul>
</div>
</div>
由于不允许用框架，这里对一些可能要到的方法作一个简单的封装。
首先创建一个封装对象，暂且取名 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 ){
