ajax 搜索时多关键词，太耗内存cpu
test.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=gb2312" />
<title>搜索提示</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var line = 0;//定义一个全局的line以用于记录当前显示的是哪一行
var keywords = "";//用于记录用户输入的关键字,因为在上下键操作的过程中会改变搜索框的值，用户在通过键盘上下键操作时应该还可以返回到他最初的状态
$(document).keyup(function(event){//用户通过键盘进行操作，按键弹起时
$("#keyword").bind("propertychange", showGs);//将mychange事件绑定到propertychange事件上
$("#keyword").bind("input", showGs);//firefox 与上面的效果类似，只是在firefox中是input事件
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){//当用户不是在按上下与回车键时，将搜索框中的值赋给keywords，记录用户的初始状态
keywords = $("#keyword").val();
}
});
$(document).keydown(function (event) {// 38上 40下 13回车 //用户通过键盘进行操作，按键按下起时
if($.browser.msie){
var keyStr=event.keyCode;
}else{
var keyStr=event.which;
}
if(document.getElementById("ts").style.display == "block"){
//按键盘的上方向键
if(keyStr==38){
$("#keyword").unbind("propertychange");//移除propertychange事件
$("#keyword").unbind("input");//firefox与上面类似
var html = "";
line = (line == 0 ? $("#newUrl li").length : line-1 );
if(line == 0){
html = keywords;
$("#newUrl li").removeClass("selecte");//消除选中样式
}else{
$("#newUrl li").removeClass("selecte");//消除选中样式
$("#newUrl li").eq(line-1).addClass("selecte");
html = $("#newUrl li").eq(line-1).find("a").text();
}
$("#keyword").val(html);
}else if(keyStr==40){
$("#keyword").unbind("propertychange");//移除propertychange事件
$("#keyword").unbind("input");//firefox与上面类似
var html = "";
if(line==$("#newUrl li").length){//如果line值为当前提示信息行数的值时，将用户最初输入的信息赋给搜索框
html = keywords;
$("#newUrl li").removeClass("selecte");//消除选中样式
}else{//当有提示信息行选中时
$("#newUrl li").removeClass("selecte");//消除选中样式
html = $("#newUrl li").eq(line).find("a").text();//获取有效提示信息
$("#newUrl li").eq(line).addClass("selecte");
}
line = (line == $("#newUrl li").length ? 0 : line + 1);//line值不为提示信息行数的值时line值加1，否则line归0
$("#keyword").val(html);//将结果赋给搜索框
}//end if keyStr==40 of
}//en if block
});
//ajax获取提示内容
function showGs(event){
if($.browser.msie){
var keyStr=event.keyCode;
}else{
var keyStr=event.which;
}
if(keyStr!=38&&keyStr!=40&&keyStr!=13){
$("#ts").empty();
var vkeyword=$("#keyword").val();
if(vkeyword!=""){
$.post("test.asp","keyword="+escape(vkeyword),function(m){
$("#ts").html(m);
document.getElementById("ts").style.display = "block";
});
}else{
document.getElementById("ts").style.display = "none";
line = 0;
}
}
}
//鼠标单击获取内容给文本框
function val(th){
var entLiText=$(th).find("a").text();
$("#keyword").val(entLiText);
none();
}
//鼠标移上添加样式
function Over(th){
$("#newUrl li").removeClass("selecte");
$(th).addClass("selecte");
}
//鼠标离开清除样式
function Out(){
$("#newUrl li").removeClass("selecte");
}
//关闭
function none(){
document.getElementById("ts").style.display = "none";
line = 0;
}
//失去焦点之后关闭
$(document.documentElement).click(function () {
none();
});
</script>
<body>
<style>
.search
{
BACKGROUND: url(search.jpg) no-repeat;
FLOAT: left;
MARGIN: 6px 5px 6px 20px;
WIDTH: 290px;
HEIGHT: 32px
}
.input
{
BORDER-RIGHT: medium none;
PADDING-RIGHT: 6px;
BORDER-TOP: medium none;
PADDING-LEFT: 6px;
FONT-SIZE: 12px;
BACKGROUND: none transparent scroll repeat 0% 0%;
FLOAT: left;
PADDING-BOTTOM: 4px;
BORDER-LEFT: medium none;
WIDTH: 200px;
COLOR: #959595;
LINE-HEIGHT: 24px;
PADDING-TOP: 4px;
BORDER-BOTTOM: medium none;
HEIGHT: 24px
}
.button
{
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
FONT-WEIGHT: bolder;
FONT-SIZE: 14px;
BACKGROUND: none transparent scroll repeat 0% 0%;
FLOAT: left;
MARGIN-LEFT: 180px;
BORDER-LEFT: medium none;
WIDTH: 57px;
COLOR: #fff;
LINE-HEIGHT: 30px;
BORDER-BOTTOM: medium none;
HEIGHT: 32px;
TEXT-ALIGN: center
}
#newUrl{list-style-type: none;border:1px solid #000;width:232px;}
#newUrl li{background:#FFF; text-align:left;}
#newUrl li{display:block; padding:5px 6px; cursor:pointer; color:#666;} /*设置提示框内li标签下的a标签效果*/
#newUrl li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*当鼠标移入提示框内时的效果*/
#newUrl .selecte{background:#CCCCCC;} /*当键盘移入提示框内时的效果*/
</style>
<div class="search" style="position:relative;">
<form id="searchForm" name="searchForm" method="get">
<input name="keywords" autocomplete="off" type="text" id="keyword" onKeyUp="showGs(event)" value="在此输入您要搜索的产品名称" onBlur="if(this.value == '')this.value='在此输入您要搜索的产品名称'" onFocus="if(this.value == '在此输入您要搜索的产品名称')this.value = ''" class="input" />
<input name="imageField" style="padding:0; margin:0; float:left; margin-left:20px;" type="submit" value="搜索" class="button" />
</form>
<div id="ts" value="aaa" style="position:absolute;top:30px;left:0px;z-index:1000;"></div>
</div>
</body>
</html>
Response.Charset = "gb2312"
keyword=Trim(Request.Form("keyword"))
keyword=replace(keyword,"+"," ")
if trim(keyword)="" then response.End()
function seachKey(booksname,keyword)
MyArray = Split(keyword," ")
For I = Lbound(MyArray) to Ubound(MyArray)
if I=0 then
tmpstr=tmpstr & " booksname like '%"&MyArray(I)&"%'"
else
tmpstr=tmpstr & " and booksname like '%"&MyArray(I)&"%'"
end if
Next
seachKey=tmpstr
end function
set rs=server.CreateObject("adodb.recordset")
strWhere=seachKey(booksname,keyword)
rs.open "select top 10 booksname,chengjiaocount from books where "& strwhere &" order by chengjiaocount desc",conn,1,3
If not (rs.eof and rs.BOF) Then
i=1
Response.write "<ul id=""newUrl"" onMouseOut=""Over()"">"
Do While Not rs.eof
Response.write "<li onMouseOver=""Over(this)"" onclick=""val(this)""><a>"&rs("booksname")&"</a></li>"
i=i+1
if i>=10 then exit do
rs.movenext
loop
Response.write "</ul>"
End If
rs.close:set rs=nothing
// $("#keyword").unbind("propertychange");//移除propertychange事件
//$("#keyword").unbind("input");//firefox与上面类似 var timer
//ajax获取提示内容
function showGs(event){
if($.browser.msie){
var keyStr=event.keyCode;
}else{
var keyStr=event.which;
}
if(keyStr!=38&&keyStr!=40&&keyStr!=13){
$("#ts").empty();
var vkeyword=$("#keyword").val();
if(vkeyword!=""){
///////////////////
clearTimeout(timer);///////////////
timer=setTimeout(function(){
$.post("test.asp","keyword="+escape(vkeyword),function(m){
$("#ts").html(m);
document.getElementById("ts").style.display = "block";
});
},300);//这个延时自己决定，一般300ms够了
}else{
document.getElementById("ts").style.display = "none";
line = 0;
}
}
}
$(document).keyup(function(event){//用户通过键盘进行操作，按键弹起时
/*///////////放到外面来，要不每次keyup就绑定一次showGs，这样会执行n次的showGs，当然慢了
$("#keyword").bind("propertychange", showGs);//将mychange事件绑定到propertychange事件上
$("#keyword").bind("input", showGs);//firefox 与上面的效果类似，只是在firefox中是input事件 */
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){//当用户不是在按上下与回车键时，将搜索框中的值赋给keywords，记录用户的初始状态
keywords = $("#keyword").val();
}
});
$(function(){/////////
$("#keyword").bind("propertychange", showGs);//将mychange事件绑定到propertychange事件上
$("#keyword").bind("input", showGs);//firefox 与上面的效果类似，只是在firefox中是input事件
})