Ajax+JSON 搜索框自动完成提示功能

chaoyi

浏览: 291008 次
性别:
来自: 广州

最近访客更多访客>>

hjz

loginboot

szluckboy

1357冬天哈

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-01 ( 21)
2014-12 ( 32)
2014-11 ( 42)
更多存档...

博客分类：

Struts2

index.jsp 页面

<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单自动完成</title>
<!-- jQuery UI 样式文件 -->
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" />
<!-- jQuery 基础脚本库 -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- jQuery UI 所有插件脚本库 -->
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
	$(function() {
		//调用 autocomplete 控件
		$("#tags").autocomplete({
			minLength : 2,//最少 2 个字符才现提示
			delay : 1000,//1秒后再出现提示
			source : function(request, response) {
				//通过 request.term 获得输入的值（term 为默认参数名），response([Array])用来呈现远程数据
				$.post("demo.jsp", "term=" + request.term, function(data) {
					//把数据返回的数据转成 JSON 对象
					var result = $.parseJSON(data);
					response(result);//输出返回结果
				});
			},
			//得到焦点就显示
			focus : function(e, ui) {
				$("#info").text(ui.item.value);
			}
		});
	});
</script>
</head>
<body>
	查询：
	<input id="tags" type="text" />
	<span id="info"></span>
</body>
</html>

demo.jsp 页面

<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<%
	request.setCharacterEncoding("GBK");
	String query = request.getParameter("term");//获取要匹配的参数
	String[] source = { "ActionScript", "AppleScript", "Asp", "BASIC",
			"C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
			"Fortran", "Groovy", "Haskell", "Java", "JavaScript",
			"Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" };
	StringBuffer buffer = new StringBuffer("[");
	//遍历目标数组，返回符合条件的结果
	for (int i = 0; i < source.length; i++) {
		if (null != query) {
			//忽略大小写比较
			if (source[i].toLowerCase().startsWith(query.toLowerCase())) {
				buffer.append("{\"label\":\"" + source[i] + "\"},");
			}
		}
	}
	String result = buffer.toString();
	//去掉最后面的逗号
	if (result.endsWith(",")) {
		result = result.substring(0, result.length() - 1);
	}
	result += "]";
	//输出到浏览器
	out.print(result);
	//输出到控制台[{"label":"ActionScript"},{"label":"AcXXX"}]
	System.out.print(result);
%>

效果图：