欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery-UI 学习笔记(二) Autocomplete

程序员文章站 2022-07-15 14:52:50
...
jQuery-UI 学习笔记(二) Autocomplete

jQuery-UI 学习笔记(二) Autocomplete
            
    
    博客分类: javascript / jquery jqueryuijquery 

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; }

在输入框右侧加入一个小图片,提示正在加载弹出式的提示框。
相关标签: jqueryui jquery