Using JQuery and ASP to build AutoComplete function

Client code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用JQuery和ASP打造AutoComplete功能</title>
<script type="text/javascript" src="js/jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString) {
   if(inputString.length == 0) {
    // Hide the suggestion box.
    $('#suggestions').hide();
   } else {
    $.post("showmember.asp", {queryString: ""+escape(inputString)+""}, function(data){
     if(data.length >0) {
      $('#suggestions').show();
      $('#autoSuggestionsList').html(unescape(data));
     }
    });
   }
} // lookup

function fill(thisValue) {
   $('#inputString').val(thisValue);
   setTimeout("$('#suggestions').hide();", 200);
}
</script>

<style type="text/css">
body {
   font-family: Helvetica;
   font-size: 11px;
   color: #000;
}

h3 {
   margin: 0px;
   padding: 0px;
}

.suggestionsBox {
   position: relative;
   left: 30px;
   margin: 10px 0px 0px 0px;
   width: 200px;
   background-color: #212427;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border: 2px solid #000;
   color: #fff;
}

.suggestionList {
   margin: 0px;
   padding: 0px;
}

.suggestionList li {
  
   margin: 0px 0px 3px 0px;
   padding: 3px;
   cursor: pointer;
}

.suggestionList li:hover {
   background-color: #659CD8;
}
</style>
</head>
<body>
    <div>
   <form>
    <div>
     请输入您的单位名称:
     <br />
     <input type="text" size="30" value="" id="inputString" οnkeyup="lookup(this.value);" οnblur="fill();" />
    </div>
   
    <div class="suggestionsBox" id="suggestions" style="display: none;">
     <img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
     <div class="suggestionList" id="autoSuggestionsList">
      &nbsp;
     </div>
    </div>
   </form>
</div>
</body>
</html>

 

Server-side code:

<%

'Unescape () function

Function VBsUnEscape(str)  
dim i,s,c
s=""
For i=1 to Len(str)
c=Mid(str,i,1)
If Mid(str,i,2)="%u" and i<=Len(str)-5 Then
If IsNumeric("&H" & Mid(str,i+2,4)) Then
s = s & CHRW(CInt("&H" & Mid(str,i+2,4)))
i = i+5
Else
s = s & c
End If
ElseIf c="%" and i<=Len(str)-2 Then
If IsNumeric("&H" & Mid(str,i+1,2)) Then
s = s & CHRW(CInt("&H" & Mid(str,i+1,2)))
i = i+2
Else
s = s & c
End If
Else
s = s & c
End If
Next
VBsUnEscape = s
End Function


on error resume next
response.Charset="GB2312"

dim keyword
keyword=Trim(request.Form("queryString"))
set rs3=server.CreateObject("adodb.recordset")
rs3.open "select UserName from [User] where Coname like '%"&VBsUnEscape(keyword)&"%'",conn,1,1
if rs3.eof and rs3.bof then
response.Write("没有该会员!")
else
do while not rs3.eof
%>
<li οnclick="fill('<%=rs3("UserName")%>');"><%=rs3("UserName")%></li>
<%
rs3.movenext
loop
end if
rs3.close
set rs3 = nothing
%>

Published 16 original articles · won praise 1 · views 30000 +

Guess you like

Origin blog.csdn.net/wvtjplh/article/details/5265094