asp 實現輸入提示

頁面

 

  <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;}