页面
<input name="key" id="key" type="text" class="input1" size="13" οnkeyup="keyupdeal(event);" οnkeydοwn="keydowndeal(event);" οnclick="keyupdeal(event);">
后台页面
<% '----------------------------------------------------------------- dim keyword keyword=trim(request("key")) 'response.Write(request("key")+"add") '接收ajax发送的参数 if keyword="" then response.End() '------------------------------------------------------------------ set rs=server.CreateObject("adodb.recordset") sql="select * from Hotel where h_name like '%"&keyword&"%' order by id desc" rs.open sql,conn,1,1 '------------------------------------------------------------------ '--------如果没有找到的话,返回0 '--------如果找到的话,返回所有匹配的项目 if not (rs.eof and rs.bof) then response.Write("<ul>") for i=0 to 9 if rs.eof then exit for response.Write("<li value="""&i&""" οnclick=""form_submit()"" οnmοuseοver=""mo(this.value)"">"&rs("h_name")&"<span>"&rs("h_zone")&"</span></li>") rs.movenext next response.Write("</ul>") end if rs.close set rs=nothing %>
js页面
var j=-1; var temp_str; var $=function(node){ return document.getElementById(node); } var $$=function(node){ return document.getElementsByTagName(node); } function ajax_keyword(){ var xmlhttp; try{ xmlhttp=new XMLHttpRequest(); } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4){ if (xmlhttp.status==200){ var data=xmlhttp.responseText; $("suggest").innerHTML=data; j=-1; } } } xmlhttp.open("post", "ajax_result.asp", true); xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xmlhttp.send("key="+escape($("key").value)); } function keyupdeal(e){ var keyc; if(window.event){ keyc=e.keyCode; } else if(e.which){ keyc=e.which; } if(keyc!=40 && keyc!=38){ ajax_keyword(); temp_str=$("key").value; } } function set_style(num){ for(var i=0;i<$$("li").length;i++){ var li_node=$$("li")[i]; li_node.className=""; } if(j>=0 && j<$$("li").length){ var i_node=$$("li")[j]; $$("li")[j].className="select"; } } function mo(nodevalue){ j=nodevalue; set_style(j); } function form_submit(){ if(j>=0 && j<$$("li").length){ $$("input")[0].value=$$("li")[j].childNodes[0].nodeValue; } //document.search.submit(); } function hide_suggest(){ var nodes=document.body.childNodes for(var i=0;i<nodes.length;i++){ if(nodes[i]!=$("key")){ $("suggest").innerHTML=""; } } } function keydowndeal(e){ var keyc; if(window.event){ keyc=e.keyCode; } else if(e.which){ keyc=e.which; } if(keyc==40 || keyc==38){ if(keyc==40){ if(j<$$("li").length){ j++; if(j>=$$("li").length){ j=-1; } } if(j>=$$("li").length){ j=-1; } } if(keyc==38){ if(j>=0){ j--; if(j<=-1){ j=$$("li").length; } } else{ j=$$("li").length-1; } } set_style(j); if(j>=0 && j<$$("li").length){ $("key").value=$$("li")[j].childNodes[0].nodeValue; } else{ $("key").value=temp_str; } } }
css
#key{
display:inline;
float:left;
}/**/
#sug{
margin-right:200px;
margin-top:-3px;
border:1px solid #000;
list-style:none;
width:222px;
padding:0px;
}
.select{
background:#36C;
color:#FFF;
}
.select span{
color:#FFF;
}
#sug li{
line-height:16px;
font-size:12px;
color:#CC3366;
padding:2px;
}
#sug span{
float:right;
font-size:12px;
color:#008000;
margin-top:-18px;
}/**/
#suggest{
margin:0 auto;
float:left;
/*z-index:20;*/
position:absolute;}