[原创]jQuery实现搜索框自动完成功能

主要功能要点（已实现）

1.监听搜索框输入文本，根据搜索框文本变化情况即时通过Ajax向数据库查询搜索建议，并把建议反馈到搜索框下方的搜索建议框中，无搜索建议时自动隐藏建议框边框。

2.鼠标滑动到搜索建议框选取候选项目，并通过点击动作确定选中项目为查询内容并提交搜索请求。

3.监听键盘事件，当有搜索建议时，可以使用键盘上下键在搜索候选项目中循环选取，并可通过回车键确定选中项目为查询内容并提交搜索请求。

4.当鼠标和键盘同时操作时，保证选取项目的延续性，即鼠标与键盘间隔操作不会出现冲突。

5.屏蔽原浏览器自带搜索框自动完成。

6.搜索框内容随搜索建议框候选项的改变而改变。

扩展功能点（未实现）

1. 用户自己设定是否出现搜索框，并记录用户使用习惯。

2.自主关闭搜索框。

3.滚动条功能

体验缺点：在ie6下好像没有自动回收资源的机制，所以在ie6下多次使用改功能后有可能出现键盘相应延迟现象。

主要函数autoCom()

1
2 //autoCom
3
4
5 function autoCom(){
6
7 var searchKey;
8 var searchType;
9
10
11
12 searchKey = $("form#searchBar input.input").attr("value");
13 searchType = $("div#multipleselect a").attr("class");
14
15
16
17
18
19
20 if(searchKey){ //判定文本框是否为空
21
22
23
24
25
26 $.get("../ajaxSearch/ajax.aspx", {keyword:searchKey,type:searchType}, function (data, textStatus){ //异步读取数据
27
28
29
30
31
32 var listLength; //li长度
33
34
35
36 var currentList; //选中li位置
37
38 currentList = -1 ; //初始化为-1
39
40
41
42 $("#searchSuggest ul").html(data); //将异步读取内容显示到提示框中
43
44 listLength = $("#searchSuggest ul li").length;
45
46 if(listLength > 1){ //判断是否有返回内容
47
48 $("#searchSuggest").show(); //显示提示框
49
50
51 }
52
53 else{
54
55 $("#searchSuggest").hide(); //隐藏提示框
56
57
58 }
59
60
61
62 $("#searchSuggest ul li").hover(function(){ //定制提示框内滑动动作
63
64 $("#searchSuggest ul li").removeClass();//先清除样式 避免跟键盘冲突
65
66 $(this).addClass("lihover");
67
68 currentList = $("#searchSuggest ul li").index(this)
69
70 }, function(){
71
72 $(this).removeClass("lihover");
73
74
75
76 }).click(function(){ //定制提示框内点击动作
77
78 var keywordContent;
79
80 keywordContent=$(this).text();
81
82 $("form#searchBar input.input").val(keywordContent);
83
84 $("#searchSuggest").hide();
85
86
87 $("form#searchBar").submit(); //提交搜索请求
88
89 });
90
91
92 $(document).keydown(function(event){ //键盘响应函数
93
94
95 event = event || window.event; //兼容多浏览器
96
97 if(event.keyCode==38){ //监听上方向键
98
99

//alert("上");

if(currentList < 1 ){

currentList=listLength - 1;

$("#searchSuggest ul li").removeClass();//先清除样式 避免冲突

$("#searchSuggest ul li").eq(currentList).addClass("lihover");

}

else{

currentList--;

$("#searchSuggest ul li").removeClass();//先清除样式 避免冲突

$("#searchSuggest ul li").eq(currentList).addClass("lihover");

}

};
if(event.keyCode==40){ //监听下方向键

//alert("下");
if(currentList < (listLength - 1) ){

currentList++;

$("#searchSuggest ul li").removeClass();//先清除样式 避免冲突

$("#searchSuggest ul li").eq(currentList).addClass("lihover");

}
else{

currentList=0;

$("#searchSuggest ul li").removeClass();//先清除样式 避免冲突

$("#searchSuggest ul li").eq(currentList).addClass("lihover");

}

};

if(event.keyCode==13){ //监听回车键

if($("#searchSuggest ul li").length >0){

keywordContent2= $("#searchSuggest ul li").eq(currentList).text();

$("form#searchBar input.input").val(keywordContent2);

$("#searchSuggest").hide();

// $("form#searchBar").submit();

}
else{

$("form#searchBar").submit();

}

}

}); //键盘相应结束

});

//end get function

$("body").click(function(){ //点击其他地方隐藏搜索建议提示框

$("#searchSuggest").hide();

});

}

// end if
　else
　 　{
　 　
　 　
$("#searchSuggest").hide();

　 　};

};

//end autoCom

为input事件添加autoCom（）函数

1 $("form#searchBar input.input").keyup(function(event){ //为搜索框加键盘事件监听
2
3
4 if((event.keyCode!=38)&&(event.keyCode!=40)&&(event.keyCode!=13)){ //判断键盘事件，抛弃上下键跟回车键
5
6 autoCom();
7 　
8 　 }
9 　
　
　
});

html结构

1 <!--searchBar 搜索框-->
2
3 <div class="searchBar">
4
5
6
7
8 <form id="searchBar" action="search.aspx" method="post">
9

<div id="multipleselect" ><a class="info" href="#">资讯</a></div>

<div id="choice">
<ul>
<li><a class="info" href="#"><span>资讯</span></a></li>
<li><a class="kl" href="#"><span>知识</span></a></li>
<li><a class="product" href="#"><span>产品</span></a></li>
<li><a class="brand" href="#"><span>品牌</span></a></li>
<li><a class="company" href="#"><span>企业</span></a></li>
<li><a class="business" href="#"><span>商机</span></a></li>
<li><a class="logi" href="#"><span>物流</span></a></li>
<li><a class="tech" href="#"><span>技术</span></a></li>
<li><a class="inspect" href="#"><span>食检</span></a></li>

</ul>

</div>

<input class="input" name="keyword" type="text" autocomplete="off"/>

<input class="submit" type="submit" value="搜索"/>

<div id="searchSuggest">
<ul>

</ul>

</div>

</form>
</div>

<!--end searchBar 搜索框-->

后台主用通过get的方式以及keyword，type判定类别并返回内容