asp自动提示

最新推荐文章于 2024-07-29 18:09:51 发布

原创最新推荐文章于 2024-07-29 18:09:51 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#asp #xmlhttprequest #function #autocomplete #browser #mozilla

Asp 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于HTML、JavaScript和CSS实现的输入框实时联想搜索功能。该功能通过AJAX技术从服务器请求数据，并将结果展示在下拉列表中供用户选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

##################################HTML 代码:
<input name="searchkey" type="text" style="FONT-SIZE:" onFocus="this.select()" onBlur="hideDiv();" onclick="keyupdeal(event);" onKeyDown="keydowndeal(event);" onKeyUp="keyupdeal(event);" onKeyPress="if (browser=='IE'){keyupdeal(event);}" onMouseOver="this.focus()" value="" size="21" maxlength="30" 9pt; background-color:="background-color:" #ffffff class="keyword" id="searchkey" autocomplete="off"/>
<div id="keytishi"></div>

##################################JS 代码:
<script>
function onsearchkeyblur()
{
document.getElementById("keytishi").style.display = "none";
}
<!--

//建立XMLHttpRequest对象

var xmlhttp;
var browser;
browser='IE';//默认为IE浏览器
  var j=-1;
  var temp_str;
  var $=function(node){
   return document.getElementById(node);
  }
  var $$=function(node){
   return document.getElementsByTagName(node);
  }
try{
    xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
    try{
        xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
    }catch(e){
        try{
            xmlhttp= new XMLHttpRequest();
   browser="Mozilla";
        }catch(e){}
    }
}

}
  }
  function mo(nodevalue){
   j=nodevalue;
   set_style(j);
   if(j>=0 && j<$$("li").length){
    $("searchkey").value=$$("li")[j].childNodes[0].childNodes[0].nodeValue;
   }
   else{
    $("searchkey").value=temp_str;
   }
  }
  function form_submit(){
   if(j>=0 && j<$$("li").length){
    $("searchkey").value=$$("li")[j].childNodes[0].childNodes[0].nodeValue;
    }
   hideDiv();
   //document.search.submit();
  }
  function hide_suggest(){
   var nodes=document.body.childNodes;
   for(var i=0;i<nodes.length;i++){
    if(nodes[i]!=$("searchkey")){
     $("keytishi").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){
    $("searchkey").value=$$("li")[j].childNodes[0].childNodes[0].nodeValue;
    }
   else{
    $("searchkey").value=temp_str;
    }
   }
  }

//-->
// JavaScript Document
</script>
########################################### CSS样式
<style type="text/css">
<!--
.keyword{width:150px; height:20px; border:#666666 1px solid;}/**//*文本框样式*/
#keytishi{width:300px; height:auto; border:#666666 1px solid; position:absolute; background-color:#FFFFFF; display:none;z-index:9999;}/**//*提示层样式*/
#keytishi ul{
margin:0px;
padding: 0px;
}/**//*提示层样式*/
#keytishi ul li{
margin:0;
list-style-type:none;
line-height:16px;
height:16px;
font-size:12px;
padding:2px;
cursor:pointer;
background-color: #FFFFFF;
}
.focusLi{
margin:0;
list-style-type:none;
line-height:16px;
height:16px;
font-size:12px;
padding:2px;
background-color: #3366CC;
cursor:pointer;
color: #FFFFFF;
}
.l{margin:0px 0px 0px 3px;float:left;}
.r{color: #006600;float:right;}

.r_focus{color: #FFFFFF;float:right;}
-->
</style>
######################################## 后台代码

<%
    dim rs
    dim sql
    dim keyWords
    keyWrods = Request("keyword")
    Set rs = Server.CreateObject("ADODB.Recordset")
    sql = "select top 10 C_KWords,C_Pnum from shop_keywordCount where C_KWords like '"&keyWrods&"%' and C_Pnum<>0 or C_Pnum<>null order by C_Pnum desc"
rs.open sql,conn,1,1
    if not (rs.bof and rs.eof) then
    Response.Write("<ul>")
dim liNo
liNo = 0
    do while not rs.eof
%>
<li onmouseover="mo(this.value)" onclick="form_submit()" value="<%= liNo %>" id='ajax'><span class="l"><%Response.Write(escape(rs("C_KWords")&"</span><span class='r'>约"&rs("C_Pnum")&"件商品</span>"))%></li>
<%
    rs.movenext
  liNo = liNo+1
    loop
    Response.Write("<ul>")
    end if
    rs.close
    set rs = nothing
    conn.close
    Set conn = nothing
%>