今天看群里有人發(fā)起了人人網(wǎng)以前一些面試題，我以前也轉(zhuǎn)載過一些，恰好閑著，挑選一題來做做，練個手。
本題有以下要求：
1. 使用原生代碼實(shí)現(xiàn)，不可使用任何框架；
2. 對 input框中輸入的字符進(jìn)行匹配，將匹配到的內(nèi)容以菜單的形式展現(xiàn)在 input框的下方；
3. 只針對英文字符進(jìn)行匹配，并且匹配到的內(nèi)容在菜單中加粗；
4. 通過鍵盤上的上下箭頭可以對菜單進(jìn)行選擇，按下回車后將選中的內(nèi)容寫入到 input框中；
思 路
捕捉輸入變化，用用戶輸入的值（下稱輸入值）去匹配列表項(xiàng)，這里假設(shè)列表項(xiàng)是查詢返回的一個數(shù)組（下稱列表），匹配方式為用輸入值作為開始值匹配每個列表值，將符合篩選條件的項(xiàng)輸出到頁面。
分 析
第三點(diǎn)要求中關(guān)鍵字是加粗，這里用正則替換就好了。
第四點(diǎn)要求的關(guān)鍵字就比較多了，一句話暗藏許多殺機(jī)，這一部分主要是針對鍵盤，首先是上下按鍵，然后是回車，還有一個寫入到input框。
到這，如果你認(rèn)為完了那就操之過急了，至少還有4個隱性的需求。
•第一項(xiàng)默認(rèn)高亮顯示，上下按鍵的同時當(dāng)前項(xiàng)高亮。
•按下Enter默認(rèn)第一項(xiàng)被選中。
•鼠標(biāo)經(jīng)過時當(dāng)前項(xiàng)高亮。
•支持點(diǎn)擊選中項(xiàng)。
也許還有所遺漏，這里就不糾結(jié)了。
實(shí) 踐
這雖然是一道JS題，但這之前，頁面結(jié)構(gòu)還是要先寫好。
代碼如下:
<div id="wrap">
<input type="text" id="put" />
</div>
<div id="menu">
<div>
<ul id="output">
<li>占位</li>
<li>占坑</li>
</ul>
</div>
</div>
由于不允許用框架，這里對一些可能要到的方法作一個簡單的封裝。
首先創(chuàng)建一個封裝對象，暫且取名 dom，接下來的原生方法都放進(jìn)這個對象以作復(fù)用。
代碼如下:
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 ){
