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组件，你可以创建出具有丰富交互和美观界面的Web应用。在实际开发中，结合CSS3和响应式设计，JQuery能进一步提升用户体验，使你的网站或应用在各种设备上都能表现优秀。
此外，jQuery还有许多插件，专门用于增强和美化表单，如jQuery Validation Plugin用于表单验证，jQuery UI中的Autocomplete组件可实现自动补全功能。这些插件不仅提供了丰富的功能，还简化了代码编写。 在压缩包中...
jQuery的自动补全插件有很多现成的解决方案，如jQuery UI的Autocomplete插件，它们提供了丰富的配置选项和扩展性，但这里的代码可能更简洁，适合初学者理解学习。对于有能力的开发者，可以根据实际需求对代码进行二...
基于openocd开源工具实现的C#桌面应用工具
精品-2025人工智能神经网络基本原理解析.pdf
施耐德ATV312变频器通过MCGS RTU通讯实现双机监控与控制的触摸屏集成解决方案,无PLC的施耐德ATV312变频器通讯示例：触摸屏控制监控两台变频器，功能多且省成本,改进型可调整步长 P&O MPPT（二区MPPT复现），光储系统MPPT 直流负载供电的单级离网光伏系统中，降压转器将太阳能光伏阵列和直流负载连接起来，同时确保最大功率点跟踪（MPPT） 和电池充电控制的良好运行。 在MPPT方面，提出了一种改进的自适应步长扰动观测（P&O）方法，以达到不同天气条件下太阳能光伏阵列的实际最大功率点（MPP），同时减少稳态振荡和功率损耗。 此外，电池充电控制侧使用三级充电控制器 （TSCC） 为铅酸电池站充电。 ,改进型P&O; 复现二区MPPT; 光储系统MPPT; 最大功率点跟踪（MPPT）; 步长扰动观测; 降压转换器; 太阳能光伏阵列; 电池充电控制; 三级充电控制器（TSCC）; 铅酸电池站。,改进型P&O MPPT技术，光储系统高效能量管理
redis学习脑图笔记
大学生创业项目源码
Spring Boot企业员工管理系统（包含万字论文+MYSQL）
对应博客地址：https://blog.csdn.net/u011561335/article/details/146312389
相关文章：https://blog.csdn.net/liu_23yanfeng/article/details/146319189
从春晚看科技技术-陈雄 - 公开版本.pptx
在计算机上安装制造装备物联及生产管理ERP系统软件来发挥其高效地信息处理的作用，可以规范信息管理流程，让管理工作可以系统化和程序化，同时，制造装备物联及生产管理ERP系统的有效运用可以帮助管理人员准确快速地处理信息。 制造装备物联及生产管理ERP系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现制造装备物联及生产管理ERP系统的功能。其中管理员管理用户，新闻公告。 制造装备物联及生产管理ERP系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，制造装备物联及生产管理ERP系统都可以轻松应对。 关键词：制造装备物联及生产管理ERP系统；SpringBoot框架，系统分析，数据库设计
传统信息的管理大部分依赖于管理人员的手工登记与管理，然而，随着近些年信息技术的迅猛发展，让许多比较老套的信息管理模式进行了更新迭代，问卷信息因为其管理内容繁杂，管理数量繁多导致手工进行处理不能满足广大用户的需求，因此就应运而生出相应的问卷调查系统。 本问卷调查系统分为管理员还有用户两个权限，管理员可以管理用户的基本信息内容，可以管理新闻资讯信息以及新闻资讯的租赁信息，能够与用户进行相互交流等操作，用户可以查看问卷信息，可以查看新闻资讯以及查看管理员回复信息等操作。 该问卷调查系统采用的是WEB应用程序开发中最受欢迎的B/S三层结构模式，使用占用空间小但功能齐全的MySQL数据库进行数据的存储操作，系统开发技术使用到了JSP技术。该问卷调查系统能够解决许多传统手工操作的难题，比如数据查询耽误时间长，数据管理步骤繁琐等问题。总的来说，问卷调查系统性能稳定，功能较全，投入运行使用性价比很高。 关键词：问卷调查系统；MySQL数据库；SSM技术
VID20250317191237.mp4
西门子S7-1511 PLC PID控制阀门开度与模拟量转换——博途WinCC监控画面程序实践,西门子S7-1511 PLC PID控制阀门开度与模拟量转换——博途WinCC监控画面程序实践,matlab验证码识别系统，基于数字图像处理实现。 经过对图像的预处理、二值化、区域剪裁、数字定位、模板匹配法识别数字。 有gui界面和测试图像数据集。 ,核心关键词：Matlab验证码识别系统; 数字图像处理; 图像预处理; 二值化; 区域剪裁; 数字定位; 模板匹配法识别; GUI界面; 测试图像数据集。,基于Matlab的数字图像处理验证码识别系统
内容概要：本文提供了详细的 VMware 虚拟机安装指南，涵盖软件选择（Pro 和 Player 版区别）、安装步骤（适用于 Windows 和 Linux 主机系统）、虚拟机创建以及操作系统安装指导。详细介绍了配置虚拟机的各项关键设置，如资源分配、硬件参数定制、安装 VMware Tools 提升虚拟机性能和稳定性。并且列出了快照、克隆等高级功能的具体应用，还包括共享文件夹配置和几种常见错误的排除解决方案。 适合人群：初次接触虚拟化的用户和对虚拟环境搭建有一定兴趣的技术爱好者。 使用场景及目标：帮助用户快速部署自己的虚拟机，并掌握虚拟环境中常见的配置技巧，能够针对具体应用场景灵活地调整虚拟机的相关参数，提高工作效率，满足测试、学习、开发的需求。 其他说明：提供了一些安装过程可能遇到的问题及对应解决方案，在创建和维护过程中给予指导性的意见来确保用户的使用体验尽可能顺畅无阻，并给出了部分性能优化建议。
Matlab开发初学者视频教程，零基础入门，非常适合初学者。