jQuery-UI 学习笔记(二) Autocomplete
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>[ { "label": "余雷烨", "value": "@余雷烨 ", "id": "2" }, { "label": "应卓", "value": "@应卓 ", "id": "3" }, { "label": "易志强", "value": "@易志强 ", "id": "5" } ]@Controller@RequestMapping("/ajax")public class UserTongueController {@Resourceprivate 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;}}<%@ 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>].ui-autocomplete-loading { background: white url('../images/ui-anim_basic_16x16.gif') right center no-repeat; }