- 主要要文件有:
- Index.html 实现功能,一个文本框,输入内容并实现提示
- search.asp 查询功能,让文本框输入的内容在<a href="http://lib.csdn.net/base/mysql" class='replace_word' title="MySQL知识库" target='_blank' style='color:#df3434; font-weight:bold;'>数据库</a>中查询,然后返回给客户端
- conn.asp 数据库连接功能,实现与数据库相连 xmlhttp.js AJAX 核心部分,用来把客户端的数据传给服务端,再把服务端的数据返还给客户端.
- style.css 样式文件,主要是对google提示框查询到的内容进行样式化处理
- 先看第一个文件style.css
- @charset "utf-8";
- /* CSS Document */
- body
- {
- font-size:12px;
- font-family:Arial, Helvetica, sans-serif;
- }
- #search_suggest
- {
- position:absolute;
- background:#FFFFFF;
- text-align:left;
- border:1px #000000 solid;
- }
- .suggest_link_over
- {
- background-color:#e8f2fe;
- padding:2px 6px;
- }
- .suggest_link
- {
- padding:2px 6px;
- background-color:#FFFFFF;
- }
- .none
- {
- display:none;
- }
- 第二个文件: xmlhttp.js
- // <a href="http://lib.csdn.net/base/javascript" class='replace_word' title="JavaScript知识库" target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript</a> Documentrt
- var xmlHttp = createXmlHttpRequest();
- function createXmlHttpRequest()
- {
- var xmlhttp = null;
- try
- {
- xmlhttp = XMLHttpRequest();
- }
- catch(e1)
- {
- try
- {
- xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
- }
- catch(e2)
- {
- try
- {
- xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- catch(e3)
- {
- xmlhttp = false;
- alert("创建失败!");
- }
- }
- }
- return xmlhttp;
- }
- function change_key()
- {
- if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
- {
- var str = document.getElementById("txt_key").value;
- xmlHttp.open("get","search.asp?key=" + str ,true);
- xmlHttp.onreadystatechange = handSearchRequest;
- xmlHttp.send(null);
- }
- }
- function handSearchRequest()
- {
- if (xmlHttp.readyState == 4)
- {
- var div = document.getElementById("search_suggest");
- div.innerHTML = "";
- var str = xmlHttp.responseText.split("|");
- for (var i=0; i<str.length; i++)
- {
- var suggest = ’<div onmouseover="javascript:suggestOver(this);" ’;
- suggest += ’onmouseout="javascript:suggestOut(this);" ’;
- suggest += ’onclick="javascript:setSearch(this.innerHTML);" ’;
- suggest += ’class="suggest_link">’ + str[i] + ’</div>’;
- div.innerHTML += suggest;
- }
- }
- }
- function setSearch(div_value)
- {
- document.getElementById("txt_key").value = div_value;
- document.getElementById("search_suggest").className = ’none’;
- }
- function suggestOver(div_value)
- {
- div_value.className = ’suggest_link_over’;
- }
- function suggestOut(div_value)
- {
- div_value.className = ’suggest_link’;
- }
- 第三个文件:conn.asp
- <%
- set conn = Server.CreateObject("Adodb.Connection")
- connStr = "Provider=SQLOLEDB;Server=./SQLEXPRESS;UID=sa;PWD=sa;Initial catalog=test;"
- conn.ConnectionString = connStr
- conn.open
- %>
- 第四个文件:search.asp
- <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
- <!-- #include file="conn.asp" -->
- <%key = request.QueryString("key")
- if (key <> "") then
- key = replace(key,"/","")
- key = replace(key,"’","")
- key = replace(key,"or","")
- sel_sql = "select [key] from [key] where [key] like ’" & key & "%’"
- dim keyword
- keyword = ""
- set rs = conn.execute (sel_sql)
- do while not rs.eof
- keyword = keyword & rs(0) & "|"
- rs.movenext
- loop
- response.Write(keyword)
- end if
- %>
- 最后一个结果文件:index.html
- <!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=utf-8" />
- <title>google提示 </title>
- <mce:script src="xmlhttp.js" mce_src="xmlhttp.js" ></mce:script>
- <link rel="stylesheet" type="text/css" href="style.css" mce_href="style.css">
- </head>
- <body>
- <form id="form1" name="form1" method="post" action="">
- <input name="txt_key" type="text" id="textarea" autocomplete="off" onkeyup="change_key()"/><br/>
- <div id="search_suggest" ></div>
- </form>
- </body>
- </html>
ASP+AJAX做类似google的搜索提示
最新推荐文章于 2021-08-05 13:02:03 发布