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 class="autocomplete"></div>').hide().insertAfter('#'+e);
	//清空下拉列表的内容并且隐藏下拉列表区 
	var clear = function(){ 
		$autocomplete.empty().hide(); 
	}; 
	//注册事件，当输入框失去焦点的时候清空下拉列表并隐藏 
	$searchInput.blur(function(){ 
		setTimeout(clear,200); 
	}); 
	//下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，想百度搜索那样 
	var selectedItem = null; 
	//timeout的ID 
	var timeoutid = null; 
	//设置下拉项的高亮背景 
	var setSelectedItem = function(item){ 
		//更新索引变量 
		selectedItem = item ; 
		//按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0 
		if(selectedItem < 0){ 
			selectedItem = $autocomplete.find('li').length - 1; 
		}else if(selectedItem > $autocomplete.find('li').length-1 ) { 
			selectedItem = 0; 
		} 
		//首先移除其他列表项的高亮背景，然后再高亮当前索引的背景 
		$autocomplete.find('li').removeClass('highlight').eq(selectedItem).addClass('highlight'); 
	}; 
	var ajax_request = function(){ 
		//ajax服务端通信 
		$.ajax({ 
			'url':'./returnJson.jsp', //服务器的地址 {如果不在同一个项目也可以：全路径http://ip:端口号/returnJson.jsp}
			'data':{'search-text':$searchInput.val()}, //参数 
			'dataType':'json', //返回数据类型 
			'type':'POST', //请求类型 
			'success':function(data){ 
				//var data=eval("(" +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很好用啊。。。。这个值得深入研究。。。

jquery 模拟百度输入提示（支持中文）

相关推荐