ASP Ajax  自动完成
在使用Google搜索时，在搜索栏输入文字的时候，搜索栏下方会弹出与输入内容非常相近的关键字，单击某一行时，自动将选中的关键字填入搜索栏。这种自动完成功能，在搜索资料的过程中，提供了许多帮助信息。本章节将讲述如何通过Ajax+ASP实现搜索栏自动完成。步骤如下所示：
（1）首先为本实例设计数据库，保存为db1.mdb，该数据库只有一个新闻表，表设计视图如表8-5所示，设计完成后把表名设置为news保存。
表8-5  设计news表的字段
html自动弹出公告代码
字段名
字段类型
字段说明
id
自动编号
主键，自增列
title
文本(255)
新闻标题
keyword
文本(50)
关键字
content
备注
新闻内容
（2）然后新建一个名为index.html的HTML文件，该文件为用户提供输入搜索关键字的文本框，以及实现自动完成的JavaScript代码。首先来看布局表单，内容如下所示：
<div >
    请输入关键字：<input name="keyword" type="text" onkeyup="show_res(this.value)"/>
    <input id="Button1" type="button" value="查询" />
</div>
<div id="res" >
    <div id="res_content"></div>
    <div ><a href="javascript:hid_res();">关闭</a></div>
</div>
（3）在<head>标记内为相关内容的<div>标记定义CSS样式，代码如下所示：
<style type="text/css">
    #res ul{line-style:none;margin:0px;}
    #res ul li{ list-style:none; line-height:25px;}   
    .spanleft{float:left;}
    .spanright{float:right;}
</style>
（4）当用户在搜索栏中输入文字时，触发show_res()函数。该函数主要是创建XMLHttpRequest对象，向服务器端发送请求，并显示相关内容所在的<div>标记。代码如下所示：
<script language="javascript" type="text/javascript">
function show_res(keywordstr) {
    var ElementById("res");
    obj.style.left=keyword.offsetLeft+10;
    p=keyword.offsetTop+38;
    obj.style.display="";
    var url = 'search.asp?keyword='+keywordstr;     
    createXMLHttpRequest();
    adystatechange = handleStateChange;
    XmlHttp.open( "GET", url, true );
    XmlHttp.send( null );
    if(keyword.value==""){
        obj.style.display="none";
    }
}
</script>
（5）编写XmlHttp对象的回调函数handleStateChange()，该函数实现将服务器端返回的数据显示在页面的相关内容<div>标记中。代码如下所示：
function handleStateChange(){
    if( adyState == 4 ){
        if(XmlHttp.status == 200 ){
            //显示结果
            var sponseText;
            ElementById("res_content").innerHTML=result;
        }
    }
}
（6）编写单击相关内容<div>标记下方的“关闭”超链接的hid_res()函数，该函数实现隐藏相关内容<div>标记的功能。代码如下所示：
function hid_res(){
    ElementById("res").style.display="none";
}
（7）编写服务器端响应程序。新建一个名为seach.asp的asp文件，该文件接收客户端传递的关键字，然后检索db1.mdb数据库中news表的数据，将相近的关键字及条数提取出来，以<ul>+<li>标记的形式返回给客户端。代码如下所示：
<%
response.Charset="gb2312"
keyword=request.QueryString("keyword")
if keyword<>"" then
    sql="SELECT keyword, COUNT(keyword) AS mycount FROM news WHERE (keyword LIKE '"&keyword&"%') GROUP BY keyword"
    set ute(sql)
    returnstr="<ul>"
    while f
        returnstr=returnstr&"<li onmouseover=""this.style.cursor='hand';this.style.background='#4E69D8';lor='#ffffff';"" onmouseout=""this.style.background='#D2D2D2';lor='#000000';"" onclick=""keyword.value='" & rs("keyword") & "';hid_res();""><span class='spanleft'>" & rs("keyword") & "</span><span class='spanright'>" & rs("mycount") & "篇</span></li>"
    rs.movenext
    wend
    if returnstr="<ul>" then
        returnstr=""
    else
        returnstr=returnstr&"</ul>"
    end if
    rs.close
    conn.close
    response.Write(returnstr)
end if
%>
（8）保存整个网站，在浏览器中运行，效果如图8-11和图8-12所示。
 
图8-11  在搜索栏输入文字          图8-12  单击某一行自动填充

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。