笔记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-size:16px;}
ul,li{ list-style:none;}
#wrap{ margin:10px 0px 0px 300px;}
#put{ border:1px solid #999; height:30px; line-height:30px; padding-left:5px; width:400px;}
#menu{ position:absolute; left:0px; top:0px; border:1px solid #999; display:none;}
#menu li{ line-height:26px; padding:0px 10px; cursor:pointer;}
#menu li strong{ font-weight:bold;}
#menu li:hover,#menu li.hover{ background:#eee;}
</style>
<script type="text/javascript">
var test = [
'raytin',
'superRaytin',
'yesterday_once_more',
'youth_gone',
'lukaka',
'raytin_and_raytin',
'super_child',
'sunday',
'saturday',
'second121212'
];
window.onload = function(){
var document = window.document;
// 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','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';
}
};
var kakaObj = {
autoMatch : function(){
var input = dom.$('put'),
output = dom.$('output'),
menu = dom.$('menu'),
offset = dom.getBound( input ),
height = dom.height( input ),
old = 0,
// 杈撳叆鎹曟崏
inputProcess = function(e){
if( !e ) e = window.event;
var el = e.target ? e.target : e.srcElement;
// 鏍煎紡鍖栬緭鍏ヤ俊鎭�
dom.trim( el.value )
// 涓嶇鍚堟潯浠剁珛鍗宠繑鍥�
if( !/\w+/.test( el.value ) ){
menu.style.display = 'none';
return;
};
var r = new RegExp( "^(" + el.value + ")" ),
temp = [];
// 娓呯┖涓婁竴娆＄殑缁撴灉
output.innerHTML = '';
// 灏嗙鍚堣鍒欑殑椤规帹杩� 涓存椂缁撴灉ArrayList
for( var i = 0 , len = test.length ; i < len ; i++ ){
var cur = test[i],
li = document.createElement('li');
if( r.test( cur ) ){
cur = cur.replace( r,'<strong>$1<\/strong>');
temp.push('<li>' + cur + '</li>');
};
};
// 纭繚褰撳墠鏈夊尮閰嶆垚鍔熺殑椤�
if( temp.length ){
menu.style.display = 'block';
// 閲嶈閫変腑椤�
old = 0;
// 濉厖缁撴灉
output.innerHTML = temp.join('');
// 绗竴椤归珮浜�
dom.tag( 'li',output )[0].className += ' hover';
};
},
// 鍗曞嚮椤�
clickProcess = function(e){
if( !e ) e = window.event;
var target = e.target ? e.target : e.srcElement;
if( target.tagName.toLowerCase() == 'li' ){
input.value = dom.getText( target );
menu.style.display = 'none';
};
},
// 榧犳爣缁忚繃椤�
mouseProcess = function(e){
if( !e ) e = window.event;
var target = e.target ? e.target : e.srcElement;
if( target.tagName.toLowerCase() == 'li' ){
dom.removeClass( dom.tag( 'li',output ),'hover' );
target.className += ' hover';
};
},
// 閿洏鎸夐敭鎹曟崏
upDown = function(e){
// 鍏冪礌涓嶅彲瑙佹椂 涓嶄綔鎿嶄綔
if( !dom.isVisible(menu) ) return;
if( !e ) e = window.event;
var code = e.charCode ? e.charCode : e.keyCode,
li = dom.tag('li',output ),
maxNum = li.length;
// up
if( code == 38 ){
old--;
if( old < 0 ) old = maxNum - 1;
dom.removeClass( li,'hover' );
li[old].className += ' hover';
}
// down
else if( code == 40 ){
old++;
if( old > maxNum - 1 ) old = 0;
dom.removeClass( li,'hover' );
li[old].className += ' hover';
}
// Enter
else if( code == 13 ){
input.value = dom.getText( li[old] );
menu.style.display = 'none';
};
};
/****** 棰勫鐞� ******/
// 浣嶇疆澶勭悊
menu.style.left = offset.left + 'px';
menu.style.top = offset.top + height + 5 + 'px';
// 瀹炴椂鎹曟崏杈撳叆鍙樺寲
dom.bind( input,'propertychange',inputProcess); // IE
dom.bind( input,'input',inputProcess); // FF
// 鍗曞嚮椤硅祴鍊肩粰杈撳叆妗�
dom.bind( output,'click',clickProcess );
// 榧犳爣缁忚繃楂樹寒褰撳墠椤�
dom.bind( output,'mouseover',mouseProcess );
// 閿洏鎹曟崏
