`

jQuery-UI 学习笔记(二) Autocomplete

jqueryuijquery 
阅读更多
jQuery-UI 学习笔记(二) Autocomplete



1) 下载地址
http://jqueryui.com/download

2) HTML/JSP 写法 
<%@ page language="java" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="java.util.*" %>
<%@ page isELIgnored="false" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<base href="basePath" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Tongue</title>
		<link type="text/css" rel="stylesheet" href="css/cupertino/jquery-ui-1.8.23.custom.css" />
		<link type="text/css" rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				$("#search").autocomplete({
					source: "ajax/tongue",
					minLength: 2,
					select: function(event, ui) {
						//	alert(ui.item.id);		ui.item就是被选中的对象
						//	alert(ui.item.label);
						//	alert(ui.item.value);
					}
				});

			});
		</script>
	</head>

	<body>
		<div id="wrap">
			<input type="text" id="search" />
		</div>
	</body>
</html>


3) 后端逻辑
后端应该返回如下类似的JSON字符串 
[ { "label": "余雷烨", "value": "@余雷烨 ", "id": "2" }, { "label": "应卓", "value": "@应卓 ", "id": "3" }, { "label": "易志强", "value": "@易志强 ", "id": "5" } ]

显然是一个对象数组，其中"label","value"是必须的，其他根据业务需要可自己添加 

@Controller
@RequestMapping("/ajax")
public class UserTongueController {

	@Resource
	private UserService userService;

	@RequestMapping("/tongue")
	public ModelAndView tongue(@RequestParam("term") String term) {
		try {
			Thread.sleep(1000);
		} catch (InterruptedException e) {
		}
		
		ModelAndView mav = new ModelAndView("tongue");
		
		if (term.startsWith("@")) {
			mav.addObject("list", userService.findUserByAlias(term.substring(1)));
		}
		
		return mav;
	}

}

这个JSP用来生成JSON 
<%@ page language="java" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="java.util.*" %>
<%@ page isELIgnored="false" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
[
<c:forEach items="${list}" var="map" varStatus="status">
	{
		"label": "<c:out value="${map['name']}"></c:out>",
		"value": "@<c:out value="${map['name']} "></c:out>",
		"id": "<c:out value="${map['id'] }"></c:out>"
	}<c:if test="${! status.last}">,</c:if>
</c:forEach>
]


3) 其他修饰性的部分 
.ui-autocomplete-loading { background: white url('../images/ui-anim_basic_16x16.gif') right center no-repeat; }

在输入框右侧加入一个小图片，提示正在加载弹出式的提示框。
分享到：
| 发布一个Spring小插件postmark
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics