首页 > > 网络编程 > Asp编程 >

ASP+AJAX做类似google的搜索提示

2009-05-12 15:25:28来源：未知阅读 ()

主要要文件有:

Index.html 实现功能,一个文本框,输入内容并实现提示

search.asp 查询功能,让文本框输入的内容在数据库中查询,然后返回给客户端

conn.asp 数据库连接功能,实现与数据库相连 xmlhttp.js AJAX 核心部分,用来把客户端的数据传给服务端,再把服务端的数据返还给客户端.

style.css 样式文件,主要是对google提示框查询到的内容进行样式化处理

先看第一个文件style.css

以下为引用的内容：

[code=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

以下为引用的内容：

// JavaScript Documentrt
var xmlHttp = createXmlHttpRequest();

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’;
}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有