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; }
在输入框右侧加入一个小图片，提示正在加载弹出式的提示框。
分享到：
相关推荐
《jQuery UI：深入理解与应用》 jQuery UI是基于JavaScript库jQuery的一个扩展，它提供了一系列丰富的用户界面组件，包括但不限于对话框（Dialogs）、日期选择器（Datepickers）、拖放功能（Drag and Drop）、排序...
Widgets是jQuery UI的核心，包括Accordion（手风琴效果）、Autocomplete（自动补全）、Dialog（对话框）等。Effects则提供了各种动画效果，如Fade（淡入淡出）、Slide（滑动）等。Position模块提供了元素相对定位的...
《jQuery UI 1.10.4：深入理解与应用》 jQuery UI 是一个基于 jQuery JavaScript 库的强大用户界面库，提供了丰富的交互效果、可定制的主题以及多种可重用的组件。在本篇文章中，我们将深入探讨jQuery UI 1.10.4...
《jQuery UI 1.8.18 自定义版本详解及应用》 jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集，它提供了一系列可交互的组件，用于创建丰富的用户体验。在标题提及的 "jquery-ui-1.8.18.custom" 文件中...
官网（https://jqueryui.com/）提供了详细教程、API参考以及示例代码，是学习的好资源。 总结，jQuery UI是JavaScript开发中的强大工具，提供了丰富的用户界面组件，可以大大提升网站的用户体验。通过学习和实践，...
1. **部件（Widgets）**：jQuery UI提供了一系列的部件，如日期选择器（Datepicker）、对话框（Dialog）、下拉菜单（Autocomplete）等，这些部件都是预封装好的，开发者可以直接使用，极大地提高了开发效率。...
《jQuery UI 1.12.1 自定义组件与网页示例代码详解》 jQuery UI 是一个基于 jQuery JavaScript 库的交互式用户界面组件集合，它提供了丰富的功能，包括拖放、日期选择器、对话框、滑块、排序等，大大简化了网页的...
《jQuery UI 1.11.0 自定义版本详解》 jQuery UI 是一个基于 jQuery JavaScript 库的可扩展用户界面库。它提供了多种组件、效果、主题和交互性功能，帮助开发者构建美观、易用的网页应用。在“jquery-ui-1.11.0....
在lwme-jqueryui-demo这个压缩包中，可能包含了多个示例文件，它们展示了Autocomplete的不同用法和配置，可以帮助开发者更好地理解和运用这个组件。通过学习这些示例，你可以掌握如何根据项目需求灵活定制...
例如，你可以只选择使用按钮和下拉菜单相关的模块，通过在线构建工具（如http://jqueryui.com/download/）生成定制版本的`jquery-ui-1.12.1.custom`压缩包。 6. **主题（Themes）** jQuery UI 提供了多种预设主题...
**jQuery UI Minified Jar** jQuery UI 是一个基于 jQuery JavaScript 库的可扩展用户界面库。它提供了一系列预先设计和可自定义的组件，用于构建功能丰富的、交互式的网页应用程序。这个"jquery-ui-min.jar"文件是...
**jQuery UI** 是一个基于 **jQuery** 库的开源项目，它提供了一套完整的用户界面组件和交互效果，包括各种可自定义的主题、对话框、拖放功能、日期选择器、进度条、滑块、排序等功能。这个压缩包中的文件是 jQuery ...
标题中的 "jquery-ui-1.8.18.zip" 指的是这个库的一个具体版本——1.8.18，这通常是通过官方下载地址（http://jqueryui.com/download/all/）获取的。 jQuery UI 的核心功能包括但不限于以下几点： 1. **拖放...
`jQuery UI Autocomplete`是基于`jQuery`库的一个强大组件，用于实现自动补全功能。这个组件能够极大地提升用户体验，特别是在需要用户输入特定信息时，如搜索框、表单字段等。`jQuery UI`提供了丰富的界面效果和...
jquery-ui修改后的文件,方便用于autocomplete使用
这样的结构对于调试和学习jQuery UI的内部工作原理非常有帮助。开发者可以利用浏览器的开发者工具查看和修改这些源代码，了解每个组件的具体实现，并进行自定义修改。 `js`文件夹则包含了jQuery UI的核心JavaScript...
此外，jQuery UI 还提供了许多其他组件，如 accordions（手风琴）、tabs（选项卡）、slider（滑块）和 autocomplete（自动完成），这些都极大地丰富了网页的交互方式。 在实际应用中，开发者可以根据需求选择和定制...
《jQuery UI 1.10.3 自定义版本详解》 jQuery UI 是一个基于 jQuery JavaScript 库的可扩展用户界面工具集，它提供了一系列丰富的交互式组件和视觉效果，为Web开发者提供了创建现代、功能丰富的用户界面的强大支持...