<div id="box">
<input type="text" id="txt" value="">
<input type="button" value="搜索" id="btn">
</div>
<script src="common.js"></script>
<script>
var keyWords=["行天宫后二楼前座那个小房间","日夜排练我们听着唱片","唱片来自那唱片行叫摇滚万岁","和驻唱小店都在士林边缘","行天宫后二楼前座那个小房间","日夜排练我们听着唱片","唱片来自那唱片行叫摇滚万岁","和驻唱小店都在士林边缘"];
my$("txt").onkeyup=function(){
if(my$("dv")){
my$("box").removeChild(my$("dv"));
}
var text=this.value;
var tempArr=[];
for(var i=0;i<keyWords.length;i++){
if(keyWords[i].indexOf(text)==0){
tempArr.push(keyWords[i]);
}
}
if(this.value.length==0 || tempArr.length==0){
if(my$("dv")){
my$("box").removeChild(my$("dv"));
}
return;
}
var dvObj=document.createElement("div");
my$("box").appendChild(dvObj);
dvObj.id="dv";
dvObj.style.width="250px";
dvObj.style.border="1px solid green";
for(var i=0;i<tempArr.length;i++){
var pObj=document.createElement("p");
dvObj.appendChild(pObj);
setInnerText(pObj,tempArr[i]);
pObj.style.margin=0;
pObj.style.padding=0;
pObj.style.cursor="pointer";
pObj.style.marginTop="5px";
pObj.style.marginLeft="5px";
pObj.onmouseover=function(){
this.style.backgroundColor="yellow";
}
pObj.onmouseout=function(){
this.style.backgroundColor="";
}
}
}
</script>