1 <script type="text/javascript">
2 $(function(){
3 $search = $('#searchTxt') //取得div层
4 ,$searchInput = $search.find('#indexKey') //取得输入框JQuery对象
5 //创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置
6 var $autocomplete = $('<div ></div>')
7 .hide()
8 //清空下拉列表的内容并且隐藏下拉列表区
9 var clear = function(){
10 $autocomplete.empty().hide();
11 };
12 //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
13 $searchInput.blur(function(){
14 setTimeout(clear,500);
15 });
16 //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，想百度搜索那样
17 var selectedItem = -1;
18 //timeout的ID
19 var timeoutid = null;
20 //设置下拉项的高亮背景
21 var setSelectedItem = function(item){
22 //更新索引变量
23 selectedItem = item ;
24 //按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0
25 if(selectedItem < 0){
26 selectedItem = $("#homeKeywordAuto").find("div").length - 1;
27 }
28 else if(selectedItem > $("#homeKeywordAuto").find("div").length-1 ) {
29 selectedItem = 0;
30 }
31 //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景
32 $("#homeKeywordAuto").find("div").removeClass('highlight')
33 .eq(selectedItem).addClass('highlight');
34 };
35 var ajax_request = function(){
36 //ajax服务端通信
37 $.ajax({
38 'url':'/KeyWord/SearchKeyWord.shtml?word='+encodeURI($searchInput.val(),"UTF-8"), //服务器的地址
39 'data':{'search-text':encodeURI($searchInput.val(),"UTF-8")}, //参数
40 'dataType':'json', //返回数据类型
41 'type':'POST', //请求类型
42 'success':function(data){
43 //遍历data，添加到自动完成区
44 var adState = eval(data);
45 if(adState!=null && adState.count>0){
46 adState.keywords.length= adState.count>5 ? 5 : adState.count
47 for(var i=0;i<adState.keywords.length;i++){
48 for(var i=0;i<adState.keywords.length;i++){
49 var item = $('<div class="row"><a>'+adState.keywords[i]+'</a></div>')
50 item.click(function(){
51 $searchInput.val($(this).find("a").html())
52 $("#homeKeywordAuto").hide();
53 })
54 item.on("mouseover mouseout", function(e) {
55 if (e.type === "mouseover") {
56 $(this).addClass("highlight");
57 } else {
58 $(this).removeClass("highlight");
59 }
60 })
61 $autocomplete.append(item);
62 }
63 }
64 $("#homeKeywordAuto").empty().append($autocomplete.find("div")).show()
65 }
66 }
67 });
68 };
69 //对输入框进行事件注册
70 $searchInput
71 .keyup(function(event) {
72 //字母数字，退格，空格
73 if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) {
74 //首先删除下拉列表中的信息
75 selectedItem = -1;
76 $("#homeKeywordAuto").empty().hide();
77 clearTimeout(timeoutid);
78 timeoutid = setTimeout(ajax_request,100);
79 }
80 else if(event.keyCode == 38){
81 //上
82 //selectedItem = -1 代表鼠标离开
83 if(selectedItem == -1)
84 setSelectedItem($("#homeKeywordAuto").find('div').length-1);
85 else
86 //索引减1
87 setSelectedItem(selectedItem - 1);
88 event.preventDefault();
89 }
90 else if(event.keyCode == 40) {
91 //下
92 //selectedItem = -1 代表鼠标离开
93 if(selectedItem == -1)
94 setSelectedItem(0);
95 else
96 //索引加1
97 setSelectedItem(selectedItem + 1);
98 event.preventDefault();
99 }
100 })
101 .keypress(function(event){
102 //enter键
103 if(event.keyCode == 13) {
104 //列表为空或者鼠标离开导致当前没有索引值
105 if($("#homeKeywordAuto").find('div').length == 0 || selectedItem == -1) return;
106 $searchInput.val($("#homeKeywordAuto").find('div').eq(selectedItem).text());
107 $("#homeKeywordAuto").empty().hide();
108 }
109 })
110 $(document).click(function(){
111 $("#homeKeywordAuto").hide()
112 })
113
114 $(document).keypress(function(event){
115 if(event.keyCode == 13) {
116 if($searchInput.val().length>0)
117 $("form[name='searchForm']").submit();
118 }
119 })
120 })
121 </script>
122
123 <style>
124 #homeKeywordAuto{position:absolute;background:#fff;z-index:5;width:100%;border-left:1px solid #EAEAEA;border-right:1px solid #EAEAEA;border-bottom:1px solid #EAEAEA;border-top:0px ;margin-top:20px;}
125 #homeKeywordAuto .row {padding-left:10px;display: block;}
126 #homeKeywordAuto .row a{display:block;font-size:14px;height:32px;line-height:32px;color:#555;}
127 .highlight {
128 background-color:#DCDCDC;
129 }
130 </style>
