asp 实现输入提示

liuway

页面
 
  <input name="key" id="key" type="text" class="input1" size="13"  onkeyup="keyupdeal(event);" onkeydown="keydowndeal(event);" > 
 
 
 
后台页面
 
<%'-----------------------------------------------------------------dim keywordkeyword=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) thenresponse.Write("<ul>")for i=0 to 9if rs.eof then exit forresponse.Write("<li value="""&i&""" form_submit()"" mo(this.value)"">"&rs("h_name")&"<span>"&rs("h_zone")&"</span></li>")rs.movenextnextresponse.Write("</ul>")end ifrs.closeset 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.childNodesfor(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;}