jquery 模拟百度输入提示（支持中文）
原文地址：http://www.jb51.net/article/28075.htm
原文的代码格式及注释超赞！！！
-------------------------------------------------------
我主要修复了几个小bug:
修复了：下拉框宽度无法控制的bug;
修复了：改变调用方式后，焦点改变一次重复生成一次隐藏div 的bug;
修复了：ajax 请求jsp中文乱码，让其可以支持中文。
1、html页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>搜索词自动完成</title><style type="text/css"> .autocomplete{ border: 1px solid #9ACCFB; background-color: white; text-align: left; } .autocomplete li{ list-style-type: none; } .clickable { cursor: default; } .highlight { background-color: #9ACCFB; } </style><script type="text/javascript" src="./javascript/jquery-1.6.2.min.js"></script><script type="text/javascript"> function autoComplete(e,datas){ //取得输入框JQuery对象 var $searchInput = $('#'+e); //关闭浏览器提供给输入框的自动完成 $searchInput.attr('autocomplete','off'); //将多余的模拟的div干掉。if($(".autocomplete").size()>0){$(".autocomplete").detach();}//创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置 var $autocomplete = $('<div +data+ ")");if($(data).size()>0) { //遍历data，添加到自动完成区 $.each(data, function(index,term) { //创建li标签,添加到下拉列表中 $('<li></li>').text(term).appendTo($autocomplete).addClass('clickable').hover(function(){ //下拉列表每一项的事件，鼠标移进去的操作 $(this).siblings().removeClass('highlight'); $(this).addClass('highlight'); selectedItem = index; },function(){ //下拉列表每一项的事件，鼠标离开的操作 $(this).removeClass('highlight'); //当鼠标离开时索引置-1，当作标记 selectedItem = -1; }).click(function(){ //鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中 $searchInput.val(term); //清空并隐藏下拉列表 $autocomplete.empty().hide(); }); });//事件注册完毕 //设置下拉列表的位置，然后显示下拉列表 var ypos = $searchInput.position().top; var xpos = $searchInput.position().left; //alert("下拉列表原点坐标：("+xpos+","+ypos+")");$autocomplete.width($searchInput.width()); //$searchInput.css('width')$autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"}); setSelectedItem(0); //显示下拉列表 $autocomplete.show(); } } }); }; //对输入框进行事件注册 $searchInput.keyup(function(event) { //字母数字，退格，空格 if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) { //首先删除下拉列表中的信息 $autocomplete.empty().hide(); clearTimeout(timeoutid); timeoutid = setTimeout(ajax_request,100); }else if(event.keyCode == 38){ //上 //selectedItem = -1 代表鼠标离开 if(selectedItem == -1){ setSelectedItem($autocomplete.find('li').length-1); }else { //索引减1 setSelectedItem(selectedItem - 1); } event.preventDefault(); }else if(event.keyCode == 40) { //下 //selectedItem = -1 代表鼠标离开 if(selectedItem == -1){ setSelectedItem(0); }else { setSelectedItem(selectedItem + 1); //索引加1 } event.preventDefault(); } }).keypress(function(event){ if(event.keyCode == 13) { //enter键 //列表为空或者鼠标离开导致当前没有索引值 if($autocomplete.find('li').length == 0 || selectedItem == -1) { return; } $searchInput.val($autocomplete.find('li').eq(selectedItem).text()); $autocomplete.empty().hide(); event.preventDefault(); } }).keydown(function(event){ if(event.keyCode == 27 ) { //esc键 $autocomplete.empty().hide(); event.preventDefault(); } }); //注册窗口大小改变的事件，重新调整下拉列表的位置 $(window).resize(function() { var ypos = $searchInput.position().top; var xpos = $searchInput.position().left; $autocomplete.width($searchInput.width()); //$searchInput.css('width')$autocomplete.css({'position':'relative','left':xpos-10 + "px",'top':ypos-16+"px"}); //控件下拉div的位置}); }</script></head><body onload=""><label for="search-text">请输入关键词</label><input type="text" id="search-text" name="search-text" style="" onfocus="autoComplete('search-text','');" /></body></html>2、jsp页面，主要返回json ,你可以用任何你知道的语言。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%response.setContentType("text/xml");response.setCharacterEncoding("utf-8");request.setCharacterEncoding("UTF-8");String[] words = { "a", "abc", "apple", "abstract", "an","bike", "byebye", "beat", "be", "bing", "come", "cup","class", "calendar", "china","中","中国" ,"中国人","中华人民共合国中央人民政府！","1","12","123"};if (request.getParameter("search-text") != null) {String key = request.getParameter("search-text");if (key.length() != 0) {//关键字不为空，将符合条件 的拼成json 返回。String json = "[";for (int i = 0; i < words.length; i++) {if (words[i].startsWith(key)) {json += "\"" + words[i] + "\"" + ",";}}json = json.substring(0, json.length() - 1 > 0 ? json.length() - 1 : 1);json += "]";//System.out.println("json:" + json);out.println(json);}}%>后记：从中学习了不少东西，jquery很好用啊。。。。这个值得深入研究。。。