<html>
<body>
<style>
ul,li{}{margin: 0; padding: 0;width:100%;}
</style>
<script language="javascript" type="text/javascript">
function autoComplete()
{
var wordvalue=document.getElementById("word").value.toLowerCase();
var allVal=['北京', '广州', '郑州', '山西', '陕西'];
var alltxt="北京|bj|beijing|广州|gz|guangzhou|郑州|zz|zhengzhou|山西|sx|shanxi|陕西|sx|shanxi";
//var alltxtpp=alltxt.toLowerCase();
var alltxt_xiang=alltxt.toLowerCase().split("|");//alltxt.split("|");
//var alltxt_xiang1=alltxtpp.split("|");
var inhtml="<dl>"
var isyou=0;
var resultCount = 0;
for (i=0;i<alltxt_xiang.length;i=i+3)
{
if (alltxt_xiang[i].substring(0,wordvalue.length)==wordvalue || alltxt_xiang[i+1].substring(0,wordvalue.length)==wordvalue || alltxt_xiang[i+2].substring(0,wordvalue.length)==wordvalue)
//if (alltxt_xiang1[i].indexOf(wordvalue)!=-1)
{
var index = parseInt(i/3);
inhtml=inhtml+"<dt onclick=\"document.getElementById('word').value='"+allVal[index]+"';document.getElementById('showmenu').style.display='none';\" onmouseover=\"this.style.backgroundColor='#666666'\" onmouseout=\"this.style.backgroundColor=''\"> "+allVal[index]+"</dt>";
isyou=1;
resultCount++;
}
if(resultCount >= 5) break;
}
inhtml=inhtml+"</dl>";
if (isyou==1)
{
document.getElementById("showmenu").innerHTML=inhtml;
document.getElementById("showmenu").style.display="";
}
else
{
document.getElementById("showmenu").innerHTML="";
document.getElementById("showmenu").style.display="none";
}
if (wordvalue=="")
{
document.getElementById("showmenu").innerHTML="";
document.getElementById("showmenu").style.display="none";
}
}
</script>
<input type="text" name="word" size="20" id="word" onkeyup="setTimeout(autoComplete,10);" style="border:1px solid #666666;width:200px;height:25px;">
<div style="position: absolute; width: 200px; z-index: 1; left: 10px; top: 40px;border:1px solid #666666;display:none;" id="showmenu"></div>
<br/>
<input type="button" value="Click Me" onclick="window.status = '123'" />
</body></html>
