jQuery-UI 学习笔记(二) Autocomplete

最新推荐文章于 2018-10-18 13:48:00 发布

Outaku

最新推荐文章于 2018-10-18 13:48:00 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript / jquery 文章标签： jqueryui jquery ViewUI

本文链接：https://blog.youkuaiyun.com/Outaku/article/details/84282316

javascript / jquery 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了jQuery-UI的自动完成功能实现步骤及后端逻辑，包括HTML/JSP写法、后端处理JSON数据返回及一些修饰性样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery-UI 学习笔记(二) Autocomplete

[img]http://dl.iteye.com/upload/picture/pic/117793/63881a43-8dad-3221-abf6-11baf1f464e2.png[/img]

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

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

在输入框右侧加入一个小图片，提示正在加载弹出式的提示框。