类似百度搜索的输入框自动完成功能
自动完成功能是指：类似百度搜索之类的输入一个词的一部分后就自动提示，然后用户可以选择，不需要再输入剩余部分。
废话不多说，直观的看一下：
实现这个功能需要服务端配合。客户端通过脚本来展示从服务端取得的数据。
先看客户端的HTML：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>搜索词自动完成</title>
7 <style type="text/css">
8 #search{
9 text-align: center;
10 position:relative;
11 }
12 .autocomplete{
13 border: 1px solid #9ACCFB;
14 background-color: white;
15 text-align: left;
16 }
17 .autocomplete li{
18 list-style-type: none;
19 }
20 .clickable {
21 cursor: default;
22 }
23 .highlight {
24 background-color: #9ACCFB;
25 }
26 </style>
27 <script type="text/javascript" src="jquery.js"></script>
28 <script type="text/javascript">
29 $(function(){
30 //取得div层
31 var $search = $('#search');
32 //取得输入框JQuery对象
33 var $searchInput = $search.find('#search-text');
34 //关闭浏览器提供给输入框的自动完成
35 $searchInput.attr('autocomplete','off');
36 //创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置
37 var $autocomplete = $('<div class="autocomplete"></div>')
38 .hide()
39 .insertAfter('#submit');
40 //清空下拉列表的内容并且隐藏下拉列表区
41 var clear = function(){
42 $autocomplete.empty().hide();
43 };
44 //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
45 $searchInput.blur(function(){
46 setTimeout(clear,500);
47 });
48 //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，想百度搜索那样
49 var selectedItem = null;
50 //timeout的ID
51 var timeoutid = null;
52 //设置下拉项的高亮背景
53 var setSelectedItem = function(item){
54 //更新索引变量
55 selectedItem = item ;
56 //按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0
57 if(selectedItem < 0){
58 selectedItem = $autocomplete.find('li').length - 1;
59 }
60 else if(selectedItem > $autocomplete.find('li').length-1 ) {
61 selectedItem = 0;
62 }
63 //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景
64 $autocomplete.find('li').removeClass('highlight')
65 .eq(selectedItem).addClass('highlight');
66 };
67 var ajax_request = function(){
68 //ajax服务端通信
69 $.ajax({
70 'url':'/test/index.jsp', //服务器的地址
71 'data':{'search-text':$searchInput.val()}, //参数
72 'dataType':'json', //返回数据类型
73 'type':'POST', //请求类型
74 'success':function(data){
75 if(data.length) {
76 //遍历data，添加到自动完成区
77 $.each(data, function(index,term) {
78 //创建li标签,添加到下拉列表中
79 $('<li></li>').text(term).appendTo($autocomplete)
80 .addClass('clickable')
81 .hover(function(){
82 //下拉列表每一项的事件，鼠标移进去的操作
83 $(this).siblings().removeClass('highlight');
84 $(this).addClass('highlight');
85 selectedItem = index;
86 },function(){
87 //下拉列表每一项的事件，鼠标离开的操作
88 $(this).removeClass('highlight');
89 //当鼠标离开时索引置-1，当作标记
90 selectedItem = -1;
91 })
92 .click(function(){
93 //鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中
94 $searchInput.val(term);
95 //清空并隐藏下拉列表
96 $autocomplete.empty().hide();
97 });
98 });//事件注册完毕
99 //设置下拉列表的位置，然后显示下拉列表
100 var ypos = $searchInput.position().top;
101 var xpos = $searchInput.position().left;
102 $autocomplete.css('width',$searchInput.css('width'));
103 $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"});
104 setSelectedItem(0);
105 //显示下拉列表
106 $autocomplete.show();
107 }
108 }
109 });
110 };
111 //对输入框进行事件注册
112 $searchInput
113 .keyup(function(event) {
114 //字母数字，退格，空格
115 if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) {
116 //首先删除下拉列表中的信息
117 $autocomplete.empty().hide();
118 clearTimeout(timeoutid);
119 timeoutid = setTimeout(ajax_request,100);
120 }
121 else if(event.keyCode == 38){
122 //上
123 //selectedItem = -1 代表鼠标离开
124 if(selectedItem == -1){
125 setSelectedItem($autocomplete.find('li').length-1);
126 }
127 else {
128 //索引减1
129 setSelectedItem(selectedItem - 1);
130 }
131 event.preventDefault();
132 }
133 else if(event.keyCode == 40) {
134 //下
135 //selectedItem = -1 代表鼠标离开
136 if(selectedItem == -1){
137 setSelectedItem(0);
138 }
139 else {
140 //索引加1
141 setSelectedItem(selectedItem + 1);
142 }
143 event.preventDefault();
144 }
145 })
146 .keypress(function(event){
147 //enter键
148 if(event.keyCode == 13) {
149 //列表为空或者鼠标离开导致当前没有索引值
150 if($autocomplete.find('li').length == 0 || selectedItem == -1) {
151 return;
152 }
153 $searchInput.val($autocomplete.find('li').eq(selectedItem).text());
154 $autocomplete.empty().hide();
155 event.preventDefault();
156 }
157 })
158 .keydown(function(event){
159 //esc键
160 if(event.keyCode == 27 ) {
161 $autocomplete.empty().hide();
162 event.preventDefault();
163 }
164 });
165 //注册窗口大小改变的事件，重新调整下拉列表的位置
166 $(window).resize(function() {
167 var ypos = $searchInput.position().top;
168 var xpos = $searchInput.position().left;
169 $autocomplete.css('width',$searchInput.css('width'));
170 $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"});
171 });
172 });
173
174 </script>
175 </head>
176 <body>
177 <div id = "search">
178 <label for="search-text">请输入关键词</label><input type="text" id="search-text" name="search-text" />
179 <input type="button" id="submit" value="搜索"/>
180 </div>
181 </body>
182 </html>
服务端的代码，我们这里选择JSP，也可以使用PHP，服务端无所谓，关键是传送数据。
View Code
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2 <%
3
4 String []words = {"amani","abc","apple","abstract","an","bike","byebye",
5 "beat","be","bing","come","cup","class","calendar","china"};
6 if(request.getParameter("search-text") != null) {
7 String key = request.getParameter("search-text");
8 if(key.length() != 0){
9 String json="[";
10 for(int i = 0; i < words.length; i++) {
11 if(words[i].startsWith(key)){
12 json += "\""+ words[i] + "\"" + ",";
13 }
14 }
15 json = json.substring(0,json.length()-1>0?json.length()-1:1);
16 json += "]";
17 System.out.println("json:" + json);
18 out.println(json);
19 }
20 }
21 %>
整个过程思路其实挺清晰的，首先在输入框上注册keyup事件，然后在事件中通过ajax获取json对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当我们点击每一项的时候，就可以响应事件。键盘导航的关键是记录当前高亮的索引值，根据索引值来调整背景高亮。显示下拉列表的位置要根据输入框的位置来设置，当浏览器的大小改变时，随时调整下拉列表的位置。
JQuery是web前端的利器，有机会的话，大家一定要看一下。
