图片1
google第一次展现智能联想技术想必对每个web程序都是一次冲击吧。虽然现在有很多插件能较为简便的实现此功能，但如果能自己写一个原生的应该更吸引人。php成都在教学过程中就给出了原生的实现智能联想技术的下拉框实现，为更深入发掘此类功能打下了基础。
<!DOCTYPE html PUBLIC "-//W2C//DTD XHTML 3.0 Transitional//EN" "http://www.w2.org/TR/xhtml3/DTD/xhtml3-transitional.dtd">
<html xmlns="http://www.w2.org/3999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>智能提示演示 www.phpchengdu.com 罗维</title>
<style>
.listItem{
border:none;
}
</style>
</head>
<body>
<span id="span1">智能提示演示，兼容IE firefox。www.phpchengdu.com 罗维</span><br />输入cd试试
<br />
<input type="text" name="inputString" id="inputString" value="" /><br />
<div id="listItemDiv" style="width:200px;">
</div>
<script type="text/javascript">
var allCityList=new Array(
Array('cd','成都'),
Array('cds','成都市'),
Array('cdsr','成都市人'),
Array('bj','北京'),
Array('bjs','北京市'),
Array('bjsr','北京市人')
);
$('inputString').onkeyup=search;
function search(e){
var listItemDiv=$('listItemDiv');
var oldListItem=listItemDiv.getElementsByTagName('input');
//取得旧的项目的id，形成一个数组 这里不能直接用listItemDiv.removeChild(oldListItem［i］)来删除，因为一删除就要重算数组的length
var tempArray=new Array();
for(var i=0;i<oldListItem.length;i++){
tempArray[i]=oldListItem[i].id;
}
for(var i=0;i<tempArray.length;i++){
listItemDiv.removeChild($(tempArray[i]));
}
var inputString=$('inputString').value;
if(inputString==''){
return;
}
var cityArray=new Array();
for(var i=0,j=0;i<allCityList.length;i++){
if(allCityList[i][0].indexOf(inputString)>=0){
cityArray[j]=new Array(allCityList[i][0],allCityList[i][1]);
j++;
}
}
//alert(cityArray);
if(cityArray.length>0){
ai(cityArray);
}
var keyEvent=window.event||e;
var srcElement=keyEvent.srcElement||keyEvent.target;
var keyCode=keyEvent.keyCode||keyEvent.which;
//如果不是方向键，则不执行操作
if(keyCode==40 && cityArray.length>0){
var listItem=listItemDiv.getElementsByTagName('input');
listItem[0].focus();
}
}
function myOnkeydown(e){
var listItemDiv=$('listItemDiv');
var listItem=listItemDiv.getElementsByTagName('input');
var itemLength=listItem.length;
var keyEvent=window.event||e;
var srcElement=keyEvent.srcElement||keyEvent.target;
var keyCode=keyEvent.keyCode||keyEvent.which;
//如果不是方向键，则不执行操作
if(keyCode==40){
var id=srcElement.id
if((parseInt(id)+1)<itemLength){
var newId=parseInt(id)+1;
}else{
newId=0;
}
var newListItem=$(newId);
newListItem.focus();
return;
}
if(keyCode==38){
//alert(srcElement.id);
var id=srcElement.id
if((parseInt(id)-1)>=0){
var newId=parseInt(id)-1;
}else{
newId=itemLength-1;
}
var newListItem=$(newId);
newListItem.focus();
return;
}
if(keyCode==13){
$('inputString').focus();
$('inputString').value=srcElement.getAttribute('value');
return;
}
return false;
}
function $(id){
return document.getElementById(id);
}
</script>
</body>
</html>
