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插件,它们提供了丰富的配置选项和扩展性,但这里的代码可能更简洁,适合初学者理解学习。对于有能力的开发者,可以根据实际需求对代码进行二...
mxd文件免费下载 压缩
chromedriver-win64-136.0.7073.0.zip
weixin052用于日语词汇学习的微信小程序+ssm(文档+源码)_kaic
https://blog.csdn.net/u011561335/article/details/146312652
国产系统UOS系统,华为鲲鹏处理器 ARM架构,Qt5.15.2编译输出的包。设置环境变量后可用。博客地址:https://luoyayun361.blog.csdn.net/article/details/118395262
基于雨流计数法的源荷储双层协同优化配置策略及经济性评估研究,基于雨流计数法的源荷储双层协同优化配置及容量寿命评估方法研究,西门子S7-200PLC和MCGS火电厂烟气监测控制系统 ,西门子S7-200PLC; MCGS火电厂烟气监测; 控制系统; 烟气监测。,西门子S7-200PLC与MCGS在火电厂烟气监测控制中的应用系统
西门子S71511 PLC PID程序控制阀门开度,模拟量转换,博途WinCC画面完整案例分享,西门子S71511PLC PID程序控阀门开度:模拟量转换,博途wincc画面实例与程序详解,锂离子电池SOH估计,根据循环中的规律,提取每个循环中的的电压和电流各10个健康因子,设计的基础模型结构为输入层+LSTM层+全连接层+输出层。 ,锂离子电池SOH估计; 循环规律; 电压健康因子; 电流健康因子; 基础模型结构:输入层+LSTM层+全连接层+输出层,锂离子电池SOH预测模型:基于LSTM和电压电流健康因子
大学生创业项目源码
SAP SD-Class 8 Credit Memo & Debit Memo.mp4
2023-04-06-项目笔记-第四百四十阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.438局变量的作用域_438- 2025-03-17
质子交换膜燃料电池Simulink模型:涵盖静态与动态特性,全面计算输出性能与效率,附参考公式与文献指南,基于Simulink的质子交换膜燃料电池模型:静态和动态模拟,计算输出和效率,锂离子电池仿真,COMSOL仿真,锂电池仿真 ,锂离子电池仿真; COMSOL仿真; 锂电池仿真,锂离子电池COMSOL仿真技术研究
近年来,信息化管理行业的不断兴起,使得人们的日常生活越来越离不开计算机和互联网技术。首先,根据收集到的用户需求分析,对设计系统有一个初步的认识与了解,确定疫情信息管理系统的总体功能模块。然后,详细设计系统的主要功能模块,通过数据库设计过程将相关的数据信息存储到数据库中,再通过使用关键的开发工具,如IDEA开发平台、AJAX技术等,编码设计相关的功能模块。接着,主要采用功能测试的方式对系统进行测试,找出系统在运行过程中存在的问题,以及解决问题的方法,不断地改进和完善系统的设计。最后,总结本文介绍的系统的设计和实现过程,并且针对于系统的开发提出未来的展望工作。本系统的研发具有重大的意义,在安全性方面,用户使用浏览器访问网站时,采用注册和密码等相关的保护措施,提高系统的可靠性,维护用户的个人信息和财产的安全。在方便性方面,促进了疫情信息管理系统的信息化建设,极大的方便了相关的工作人员对疫情信息管理系统信息进行管理。 关键词:疫情信息管理系统管理;Java语言;B/S模式;AJAX技术;系统测试
内容概要:论文提出了一种全新的动态综合评价方法,该方法综合考虑了评价指标的时间发展趋势、指标权重及时间权重,解决了以往方法未能考量的趋势变化问题。通过定义“发展因子”来衡量被评价对象在特定时间内指标的发展情况,从而调整评估分数,并使用离差平方和最小化的算法获得权重。此外,该研究还提出了一种“厚今薄古”的时间加权方法,赋予近期数据更高权重。为了验证新模型的有效性和实用性,文中以中国西部地区的省份为样本进行了宏观经济评价实验。 适合人群:从事评价理论与方法研究的专业学者和技术工作者、研究生及以上学历的研究员。 使用场景及目标:该方法适用于各类涉及长时间维度的宏观经济发展评估场景。其核心目的是揭示区域内不同省市的发展潜力及其变动趋势,帮助政策制定者做出更为精准的战略布局和资源配置决策。 其他说明:论文强调此模型不仅可以区分短期表现差异,还能捕捉长期发展轨迹中的细微区别,增强了对被评对象未来发展预期的理解能力。同时指出模型在未来还可以进一步优化扩展以适应更多样的应用场景。
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。
简要分析NLMSG-NOOP参数