自动完成功能 asp+ajax

目录页

<script language="javascript" src="/js/ajaxobject.js"></script>
<script language="javascript" src="/js/vedio_ding.js"></script>
<style>
#menu_auto{height:100px;overflow:auto;border:1px solid #ccc;position:absolute;display:none;background:#ffffff;cursor:hand;filter: alpha(opacity=90); -moz-opacity:0.9;}
#menu_auto ul,li{list-style:none};
#menu_auto li{widht:100%;height:22px;font-size:12px;text-align:left;overflow:hidden;line-height:22px;}
#menu_auto li a{background:white;display:block;text-align:left;color:black;text-decoration:none}
#menu_auto li a:hover{background:#ECEEFB;display:block}
</style>
<div id="menu_auto" onclick="hidden()">
<ul>
<li><a href="javascript:closeme()">测试1</a></li>
<li><a href="">测试2</a></li>
<li><a href="">测试3</a></li>
</ul>
</div>

<script language="javascript">

function gs()
{

var _object=document.getElementById("gjz")

var _left = parseInt(_object.offsetLeft, 10);

var _top = parseInt(_object.offsetTop, 10);

while(_object = _object.offsetParent)

{

_left += parseInt(_object.offsetLeft, 10);

_top += parseInt(_object.offsetTop, 10);

if(_object != document.body)

{

_left -= parseInt(_object.scrollLeft, 10);

_top -= parseInt(_object.scrollTop, 10);

}

}

var _r=document.getElementById("gjz")
var _o=document.getElementById("menu_auto")
  _o.style.left   =   _left+1;  
  _o.style.width   =   _r.offsetWidth-2;  
  _o.style.top   =   _top   +_r.offsetHeight;  
//  _o.style.display="block"
}
function hidden()
{
var _o=document.getElementById("menu_auto")
_o.style.display="none"
}
gs()
</script>

function auto()
{
        url="/ajax/vedio/auto.asp?gjz="+escape(document.getElementById("gjz").value)
        xmlhttp_request=new getXMLRequester();
        xmlhttp_request.onreadystatechange = function()
        {
            if (xmlhttp_request.readyState == 4) {
            if (xmlhttp_request.status == 200) {
           

     
               jg=xmlhttp_request.responseText;
               var temp=jg.split(",")
               var temp1=""
               for(var i=0;i<temp.length;i++)
               {
               temp1="<li><a href=''>"+ temp[i] +"</a></li>"
               }
               // alert(jg)
               document.getElementById("menu_auto").innerHTML =temp1;
    
               if(jg!="")
               {
               document.getElementById("menu_auto").style.display="block";
      }
      else
      {
      document.getElementById("menu_auto").style.display="none";
      }
     
     
            } else {
                //alert(xmlhttp_request.status);
            }
        }
       
       
        };
      
       xmlhttp_request.open('GET',url,true);

       xmlhttp_request.send(null);
}

服务器端

 

<%Response.CharSet="gb2312" %>
<%
gjz=request.querystring("gjz")
gjz=replace(gjz,",","")

str1="狐狸,白狐,银狐,水貂,獭兔,貉子,白貉,乌苏里貉,美国水貂,白兔,鸟,养殖,技术,鱼,海鱼,淡水鱼"
str2=split(str1,",")
str3=""
for i=0 to ubound(str2)-1

 if(instr(str2(i),gjz)>0) then
  if(str3="") then
  str3=str2(i)
  else
  str3=str3 & "," & str2(i)
  end if
 end if

next

response.write str3
%>