`
ileson
  • 浏览: 214927 次
  • 性别: Icon_minigender_1
  • 来自: 河南省
社区版块
存档分类
最新评论

jquery 模拟百度输入提示(支持中文)

    博客分类:
  • RIA
阅读更多
原文地址: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很好用啊。。。。这个值得深入研究。。。

分享到:
评论

相关推荐

    JAVA___jQuery+AJAX_仿百度搜索功能

    "仿百度搜索" 的标签表明了项目的目标是模拟百度搜索的用户体验,这可能包括了实时的搜索建议、模糊匹配、搜索结果即时展示等功能。为了达到这个效果,开发者需要对前端和后端的交互有深入理解,以及对搜索算法和...

    jquery的搜索框输入提示

    "jquery的搜索框输入提示"是一个基于jQuery实现的功能,它旨在提高用户体验,特别是在用户进行搜索时提供实时的建议或匹配结果。这个功能通常用于搜索引擎或者网站的搜索框,如百度和谷歌,当用户输入关键词时,会...

    类似百度下拉提示 模拟select下拉框 jquery插件

    在网页开发中,为了提升用户体验,常常需要模拟各种交互效果,比如模拟百度下拉提示框的功能。这个功能可以通过使用jQuery插件来实现,它能够帮助开发者创建一个与百度搜索框类似的自动提示效果,使得用户在输入时能...

    jquery引导 类似google-百度提示

    标题 "jquery引导 类似google-百度提示" 指向的是一个使用jQuery库实现的搜索提示功能,类似于谷歌和百度搜索引擎在用户输入时显示相关搜索建议的交互效果。这个功能通常用于提高用户体验,减少用户输入,并帮助他们...

    基于jquery的仿百度搜索框效果代码

    现在,编写jQuery代码以监听用户输入并展示自动提示。这里我们使用`keyup`事件来检测用户在搜索框中的输入变化: ```javascript $(document).ready(function() { var searchInput = $('#searchInput'); var ...

    Jquery实现百度模糊搜索

    - **输入提示**:为提高用户体验,可以在用户输入时显示可能的匹配项,如使用`autocomplete`插件。 - **性能优化**:对于大数据集,可以考虑使用懒加载或分页加载技术,避免一次性加载所有数据。 - **错误处理**:...

    仿百度 谷歌下拉提示 纯jquery 实现

    标题中的“仿百度 谷歌下拉提示 纯jquery 实现”指的是利用JavaScript库jQuery来创建一种功能,该功能模拟了百度和谷歌搜索引擎在用户输入时显示下拉建议的效果。这种效果能够提高用户体验,因为用户无需完整输入...

    Jquery autosuggest 模糊搜索 提示

    在本项目中,开发者通过 `.NET` 后端与前端 `jQuery` 配合,模拟了类似 Google 和百度的搜索提示效果。 **1. jQuery Autocomplete 插件** `jQuery UI` 自带了一个名为 `autocomplete` 的插件,它可以监听用户在...

    ajax仿百度搜索输入自动提示

    本项目是使用JSP技术实现的一个Ajax自动提示功能,其目的是模拟百度搜索引擎的搜索提示效果。 首先,我们需要理解Ajax(Asynchronous JavaScript and XML)的核心理念。Ajax并非一种新技术,而是通过JavaScript、...

    jQuery模仿百度登录窗口弹出层特效源码.zip

    【jQuery模仿百度登录窗口弹出层特效源码.zip】是一个基于jQuery库的代码资源,用于实现类似百度登录窗口的弹出层效果。这个压缩包包含了实现这一特效所需的基本文件和说明文档。 首先,jQuery是一个广泛使用的...

    智能提示-仿百度

    标题“智能提示-仿百度”指的是一个开发项目或者功能实现,其主要目标是模拟百度搜索引擎在用户输入时的智能提示功能。这种功能通常被称为自动补全或预测搜索,它能够根据用户输入的部分关键词,快速提供可能的搜索...

    输入提示

    本篇将详细探讨“输入提示”这一主题,以及如何通过Ajax2模拟百度提示的效果。 首先,我们要理解什么是输入提示。输入提示,也称为自动补全或自动完成,是当用户在输入框中输入文字时,系统根据已有的数据集或历史...

    jquery Autocomplete(类似百度搜索框)

    **jQuery Autocomplete** 是一个非常流行的JavaScript库,用于在输入框中实现自动补全功能,类似于百度搜索框的体验。这个功能广泛应用于各种网站,帮助用户快速找到他们想要输入的信息,提高了用户界面的交互性和...

    人工智能-项目实践-搜索引擎-模仿百度首页开发的纯静态页面(未使用 jQuery 插件),支持切换搜索引擎,具有搜索关键字提示

    在这个名为“人工智能-项目实践-搜索引擎-模仿百度首页开发的纯静态页面”的项目中,开发者旨在构建一个类似于百度首页的静态网页,但不依赖于jQuery插件,而是利用JavaScript和其他相关技术来实现功能。这个项目...

    ajax实现仿百度搜索提示(suggestion)

    **Ajax 实现仿百度搜索提示(Suggestion)** 在网页开发中,为了提供更好的用户体验,我们经常需要实现类似百度搜索的实时提示功能。这个功能在用户输入查询词时,能够实时展示与输入相关的建议,无需点击搜索按钮...

    jQuery实现的仿百度商桥在线客服特效源码.zip

    5. **客服状态显示**:模拟百度商桥的在线/离线状态,可能通过服务器返回的数据来动态更新客服状态图标或文字。 6. **自定义事件和插件**:为了封装和复用代码,开发者可能会创建自定义的jQuery事件或插件,提高...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款jquery实现表单输入提示的Autobox插件(基于jquery.ui) 29.一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向...

    仿百度模拟ajax下拉框搜索

    本项目"仿百度模拟ajax下拉框搜索"就是基于jQuery实现的一个功能,旨在模仿百度搜索框的智能提示功能,当用户在输入框中输入关键词时,能够实时通过Ajax从服务器获取并显示相关的搜索建议,同时支持用户使用键盘的上...

    15个jquery常用案例源码

    1. **百度搜索下拉代码**:这个案例模拟了百度搜索框的下拉提示功能,通过监听用户输入并动态生成相关建议,提高了用户体验。核心是利用`keyup`事件捕获用户输入,并通过AJAX请求获取匹配数据,然后使用`append()`...

    Ajax和Jquery部分学习代码及数据库.rar

    在这个“Ajax和Jquery部分学习代码及数据库.rar”压缩包中,包含了作者在学习过程中编写的代码示例,涉及到与数据库交互的实际操作,如百度搜索提示功能的模拟、注册账号时的用户名可用性检测,以及利用jQuery实现的...

Global site tag (gtag.js) - Google Analytics