官网:http://jqueryui.com/autocomplete/
以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/2534262.html
jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大、最灵活的Autocomplete,它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据。
支持的数据源
jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。
普通的Array格式没有什么特殊的,如下:
1
|
[ "cnblogs" , "博客园" , "囧月" ]
|
对于JSON格式的Array,则要求有:label、value属性,如下:
其中label属性用于显示在autocomplete弹出菜单,而value属性则是选中后给文本框赋的值。
如果没有指定其中一个属性则用另一个属性替代(即value和label值一样),如下:
如果label和value都没有指定,则无法用于autocomplete的提示。
另外需要注意,对于从服务器端输出的JSON的key必须用双引号,如下:
否则可能会出现parsererror错误。
主要的参数
jQuery UI Autocomplete常用的参数有:
- Source:用于指定数据来源,类型为String、Array、Function
- String:用于ajax请求的服务器端地址,返回Array/JSON格式
- Array:即字符串数组 或 JSON数组
- Function(request, response):通过request.term获得输入的值,response([Array])来呈现数据;(JSONP是这种方式)
- minLength:当输入框内字符串长度达到minLength时,激活Autocomplete
- autoFocus:当Autocomplete选择菜单弹出时,自动选中第一个
- delay:即延迟多少毫秒激活Autocomplete
其他不常用的就不罗列了。
使用方法
假如页面上有以下输入框:
<input type="text" id="autocomp" />
AJAX请求
通过指定source为服务器端的地址来实现,如下:
1
2
3
4
|
$( "#autocomp" ).autocomplete({
source: "remote.ashx" ,
minLength: 2
}); |
然后在服务器端接收,并输出相应结果,注意默认传递的参数名称为term:
public void ProcessRequest(HttpContext context) { // 查询的参数名称默认为term string query = context.Request.QueryString["term"]; context.Response.ContentType = "text/javascript"; //输出字符串数组 或者 JSON 数组 context.Response.Write("[{\"label\":\"博客园\",\"value\":\"cnblogs\"},{\"label\":\"囧月\",\"value\":\"囧月\"}]"); }
本地Array/JSON数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
// 本地字符串数组 var availableTags = [
"C#" ,
"C++" ,
"Java" ,
"JavaScript" ,
"ASP" ,
"ASP.NET" ,
"JSP" ,
"PHP" ,
"Python" ,
"Ruby"
]; $( "#local1" ).autocomplete({
source: availableTags
}); // 本地json数组 var availableTagsJSON = [
{ label: "C# Language" , value: "C#" },
{ label: "C++ Language" , value: "C++" },
{ label: "Java Language" , value: "Java" },
{ label: "JavaScript Language" , value: "JavaScript" },
{ label: "ASP.NET" , value: "ASP.NET" },
{ label: "JSP" , value: "JSP" },
{ label: "PHP" , value: "PHP" },
{ label: "Python" , value: "Python" },
{ label: "Ruby" , value: "Ruby" }
]; $( "#local2" ).autocomplete({
source: availableTagsJSON
}); |
Callback Function方式
通过指定source为自定义函数来实现自定义数据的获取,函数主要有2个参数(request,response),分别用于获取输入的值、呈现结果
本地Array方式获取数据(模仿新浪微博的登录)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
var hosts = [ "gmail.com" , "live.com" , "hotmail.com" , "yahoo.com" , "cnblogs.com" , "火星.com" , "囧月.com" ];
$( "#email1" ).autocomplete({
autoFocus: true ,
source: function (request, response) {
var term = request.term, //request.term为输入的字符串
ix = term.indexOf( "@" ),
name = term, // 用户名
host = "" , // 域名
result = []; // 结果
result.push(term);
// result.push({ label: term, value: term }); // json格式
if (ix > -1) {
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) {
var findedHosts = (host ? $.grep(hosts, function (value) {
return value.indexOf(host) > -1;
}) : hosts),
findedResults = $.map(findedHosts, function (value) {
return name + "@" + value; //返回字符串格式
// return { label: name + " @ " + value, value: name + "@" + value }; // json格式
});
result = result.concat($.makeArray(findedResults));
}
response(result); //呈现结果
}
}); |
JSONP方式获取数据
直接从官方DEMO拿来的,通过发送ajax请求到远程服务器,然后对返回结果进行处理,最后通过response来呈现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$( "#jsonp" ).autocomplete({
source: function (request, response) {
$.ajax({
dataType: "jsonp" ,
data: {
featureClass: "P" ,
style: "full" ,
maxRows: 12,
name_startsWith: request.term
},
success: function (data) {
response($.map(data.geonames, function (item) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "" ) + ", " + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2
}); |
主要的事件
jQuery UI Autocomplete有一些事件,可用于在一些阶段进行额外的控制:
- create(event, ui):Autocomplete创建时,可以在此事件中,对外观进行一些控制
- search(event, ui): 在开始请求之前,可以在此事件中返回false来取消请求
- open(event, ui):Autocomplete的结果列表弹出时
- focus(event, ui):Autocomplete的结果列表任意一项获得焦点时,ui.item为获得焦点的项
- select(event, ui):Autocomplete的结果列表任意一项选中时,ui.item为选中的项
- close(event, ui):Autocomplete的结果列表关闭时
- change(event, ui):当值改变时,ui.item为选中的项
这些事件的ui参数的item属性(如果有的话)默认有label和value属性,不管在source中设置的数据是Array还是JSON数组,如下3种:
假如是第三种的话,还可以得到ui.item.id的值。
这些事件可以通过2种方式来绑定,如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
// 在参数中 $( "#autocomp" ).autocomplete({
source: availableTags
, select: function (e, ui) {
alert(ui.item.value)
}
}); // 通过bind来绑定 $( "#autocomp" ).bind( "autocompleteselect" , function (e, ui) {
alert(ui.item.value);
}); |
通过bind来绑定的方式使用的事件名称为"autocomplete"+事件名称,如"select"就是"autocompleteselect"。
多个值的Autocomplete
一般情况下,输入框的autocomplete仅需要一个值就可以(如:javascript);假如需要多个值(如:javascript,c#,asp.net),则需要绑定一些事件来进行额外处理:
- 在focus事件中返回false,避免输入框的值被autocomplete的单个值取代
- 在select事件中组合多个值
- 在元素的keydown事件做一些处理,理由同1
- 使用callback function方式的source,来获取最后输入的值,并呈现结果
还是直接拿官方DEMO的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
// 按逗号分隔多个值 function split(val) {
return val.split(/,\s*/);
} // 提取输入的最后一个值 function extractLast(term) {
return split(term).pop();
} // 按Tab键时,取消为输入框设置value function keyDown(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active) {
event.preventDefault();
}
} var options = {
// 获得焦点
focus: function () {
// prevent value inserted on focus
return false ;
},
// 从autocomplete弹出菜单选择一个值时,加到输入框最后,并以逗号分隔
select: function (event, ui) {
var terms = split( this .value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this .value = terms.join( ", " );
return false ;
}
}; // 多个值,本地数组 $( "#local3" ).bind( "keydown" , keyDown)
.autocomplete($.extend(options, {
minLength: 2,
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
}
}));
// 多个值,ajax返回json $( "#ajax3" ).bind( "keydown" , keyDown)
.autocomplete($.extend(options, {
minLength: 2,
source: function (request, response) {
$.getJSON( "remoteJSON.ashx" , {
term: extractLast(request.term)
}, response);
}
}));
|
结尾
最后,放上代码:点击下载。
更多的资料请看jQuery UI Autocomplete官方演示:http://jqueryui.com/demos/autocomplete
相关推荐
利用Simulink实现混合储能系统在直流微网中的下垂控制策略研究:保持直流母线电压稳定的实践与探究,Simulink仿真下的光储直流微网混合储能系统下垂控制策略优化研究(注意版本要求为2021A以上),混合储能系统 光储微网 下垂控制 Simulink仿真 注意版本2021A以上 由光伏发电系统和混合储能系统构成直流微网。 混合储能系统由超级电容器和蓄电池构成,通过控制混合储能系统来维持直流母线电压稳定。 混合储能系统采用下垂控制来实现超级电容和蓄电池的功率分配,蓄电池响应低频量,超级电容响应高频量。 通过改变光照来影响光伏出力,控制混合储能系统保持微网直流母线电压稳定在380V,不受光伏出力变化影响。 ,混合储能系统; 光储微网; 下垂控制; Simulink仿真; 版本2021A; 直流母线电压稳定; 光伏出力变化; 超级电容器; 蓄电池。,2021A+混合储能系统:光储微网下垂控制Simulink仿真研究
内容概要:本文档是针对JavaScript这一跨平台解释型语言的详尽入门手册,首先概述了JavaScript的概念及其重要特性,强调它不仅适用于前端同时也活跃于Node.js的服务器环境之中,从而成为全栈开发的重要技能。紧接着文档阐述了JavaScript的基本语法元素如变量声明、数据类型、运算符及控制结构,让新手理解JavaScript的语法规则,并通过函数与对象操作加深印象。之后介绍了一些常见的实用工具和高级用法,例如模板字符串、解构赋值以及异步编程手段(比如Promise)。对于想要深入探索的应用场景给出了广泛的指引,无论是传统的web开发还是新兴领域的IoT或自动化脚本编写皆有所涉猎。 适合人群:对于那些没有编程背景或有其他编程经验但仍希望了解并擅长运用JavaScript的个人来说非常适合。 使用场景及目标:目的是向初学者提供足够的理论指导和技术实践机会,使他们能够在不同平台上利用JavaScript创造出有意义的作品;不论是想要从事专业软件开发或是业余项目爱好者都能够从中受益。 其他说明:文档还提供了大量权威且有用的外部链接供进一步深造学习,包括但不限于主流的在线课程、权威的技术参考资料及充满活力的支持社区。
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均衡管理,不平衡电网下的svg无功补偿,级联H桥svg无功补偿statcom,采用三层控制策略。 (1)第一层采用电压电流双闭环pi控制,电压电流正负序分离,电压外环通过产生基波正序有功电流三相所有H桥模块直流侧平均电压恒定,电流内环采用前馈解耦控制; (2)第二层相间电压均衡控制,注入零序电压,控制通过注入零序电压维持相间电压平衡; (3)第三层相内电压均衡控制,使其所有子模块吸收的有功功率与其损耗补,从而保证所有H桥子模块直流侧电压值等于给定值。 有参考资料。 639,核心关键词: 1. 不平衡电网下的SVG无功补偿 2. 级联H桥SVG无功补偿STATCOM 3. 三层控制策略 4. 电压电流双闭环PI控制 5. 电压电流正负序分离 6. 直流侧平均电压恒定 7. 前馈解耦控制 8. 相间电压均衡控制 9. 零序电压注入 10. 相内电压均衡控制 以上十个关键词用分号分隔的格式为:不
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
基于主从博弈的动态定价策略与电动汽车充电管理优化在智能小区的实践(MATLAB+CPLEX gurobi实现),基于主从博弈理论的智能小区电动汽车充电与代理商动态定价策略优化研究,MATLAB代码:基于主从博弈的智能小区代理商定价策略及电动汽车充电管理 关键词:电动汽车 主从博弈 动态定价 智能小区 充放电优化 参考文档:《基于主从博弈的智能小区代理商定价策略及电动汽车充电管理》基本复现 仿真平台:MATLAB+CPLEX gurobi平台 主要内容:代码主要做的是一个电动汽车充电管理和智能小区代理商动态定价的问题,将代理商和车主各自追求利益最大化建模为主从博弈,上层以代理商的充电电价作为优化变量,下层以电动汽车的充电策略作为优化变量,通过优化得出最优电价策略以及动态充电策略。 ,电动汽车; 主从博弈; 动态定价; 智能小区; 充放电优化; MATLAB; CPLEX; gurobi平台。,基于主从博弈的电动汽车充电管理与定价策略优化MATLAB代码实现
基于Matlab语言实现的设计项目 2、适用人群:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计中的部分功能,作为“参考资料”使用。 3、解压说明:本资源需要电脑端使用WinRAR、7zip等解压工具进行解压,没有解压工具的自行百度下载即可。 4、免责声明:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。不一定能够满足所有人的需求,需要有一定的基础能够看懂代码,能够自行调试代码并解决报错,能够自行添加功能修改代码。由于作者大厂工作较忙,不提供答疑服务,如不存在资源缺失问题概不负责,谢谢理解。
资源内项目源码是均来自个人的课程设计、毕业设计或者具体项目,代码都测试ok,都是运行成功后才上传资源,答辩评审绝对信服的,拿来就能用。放心下载使用!源码、说明、论文、数据集一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 4、如有侵权请私信博主,感谢支持
Labiew噪音与振动检测模块源码揭秘:傅里叶变换与倍频程技术应用于实际项目,LabVIEW平台噪声与振动检测模块源码解析:基于傅里叶变换与倍频程原理的实用功能模块,已成功应用于实际项目,虚拟产品退换政策严谨执行,Labiew噪音与振动检测模块源码,改功能模块已运用到实际项目,原理是利用傅里叶变和倍频程实现的,产品一旦发概不 。 需要的可以联系哟 ,Labiew源码; 噪音与振动检测模块; 傅里叶变换; 倍频程; 实际项目运用,Labiew傅里叶变换倍频程噪音振动检测模块源码
基于Comsol多物理场仿真的光伏集热器异形体建模技术研究,探索comsol多物理场仿真技术:光伏集热器异形体建模应用,comsol多物理场仿真,光伏集热器,异形体建模 ,comsol多物理场仿真; 光伏集热器仿真; 异形体建模,Comsol多物理场仿真在光伏集热器及异形体建模中的应用
器官3D分割-基于WinForm框架开发的医学影像系统源码+sln+演示视频(毕设基于c#和python开发).zip 【项目简单介绍】 主要功能 肺炎诊断 器官 3D 分割 该系统具备肺炎诊断和器官 3D 分割的功能,并模仿了罗万科技的系统界面风格。 python和c#开发实现
MATLAB可以用于开发水果识别系统。这种系统通常利用机器学习和图像处理技术,对输入的水果图像进行特征提取和分类识别。以下是开发水果识别系统的一般步骤: 1. 数据收集:收集包含各种水果类别的图像数据集。 2. 数据预处理:对图像进行预处理,包括裁剪、缩放、灰度化等操作。 3. 特征提取:从每个水果图像中提取特征,例如颜色直方图、纹理特征、形状特征等。 4. 数据标记:为每个图像标记水果类别,形成训练集和测试集。 5. 模型训练:使用机器学习算法(如支持向量机、卷积神经网络等)对训练集进行训练,建立水果识别模型。 6. 模型测试:使用测试集对模型进行测试和评估,调整模型超参数以提高准确率。 7. 系统集成:将训练好的模型集成到MATLAB应用程序中,实现水果识别功能。 8. 用户界面设计:设计用户友好的界面,以便用户上传水果图像并查看识别结果。 MATLAB提供了丰富的图像处理工具箱和机器学习工具箱,可以帮助开发者快速构建水果识别系统。通过结合这些工具箱,可以实现水果的快速、准确识别。
COMSOL声子晶体仿真研究:一维至三维能带与带隙分析及色散曲线弹性波声波分析,声子晶体仿真:COMSOL代做能带图、带隙图及弹性波、声波分析与优化设计,COMSOL代做 声子晶体仿真,一维,二维,三维能带图,带隙图,色散曲线,弹性波,声波。 ,COMSOL代做;声子晶体仿真;一维/二维/三维能带图;带隙图;色散曲线;弹性波仿真;声波分析,COMSOL声子晶体仿真专家:一至三维声波模拟及能带图绘制
Matlab Simulink仿真探究Flyback反激式开关电源性能表现与优化策略,Matlab Simulink仿真探究Flyback反激式开关电源的工作机制,Matlab Simulimk仿真,Flyback反激式开关电源仿真 ,Matlab; Simulink仿真; Flyback反激式; 开关电源仿真,Matlab Simulink在Flyback反激式开关电源仿真中的应用
陪读租房系统(源码+数据库+论文+ppt)java开发springboot框架javaweb,可做计算机毕业设计或课程设计 【功能需求】 本系统有三个角色:管理员、租客和房主,要求具备以下功能: (a) 管理员;管理员使用本系统涉到的功能主要有:首页、个人中心、租客管理、房主管理、房源信息管理、房源类型管理、教育书籍管理、文章分类管理、租房信息管理、合同信息管理、在线咨询管理、咨阅回复管理、教育论坛、系统管理等功能。 (b) 租客;进入前台系统可以实现首页、房源信息、教育书籍、教育论坛、公告信息、后台管理等功能进行操作。 (C) 房主;进入系统可以实现首页、个人中心、房源信息管理、租房信息管理、合同信息管理、在线咨询管理、咨询回复管理等功能进行操作。 【环境需要】 1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境:IDEA,Eclipse,Myeclipse都可以。 3.tomcat环境:Tomcat 7.x,8.x,9.x版本均可 4.数据库:MySql 5.7/8.0等版本均可; 【购买须知】 本源码项目经过严格的调试,项目已确保无误,可直接用于课程实训或毕业设计提交。里面都有配套的运行环境软件,讲解视频,部署视频教程,一应俱全,可以自己按照教程导入运行。附有论文参考,使学习者能够快速掌握系统设计和实现的核心技术。
vue3的一些语法以及知识点
1、文件内容:libicu-doc-50.2-4.el7_7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/libicu-doc-50.2-4.el7_7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊
水果销售商城(源码+数据库+论文+ppt)java开发springboot框架javaweb,可做计算机毕业设计或课程设计 【功能需求】 水果购物网站用户可以注册登录,在首页开通会员卡,查看水果,购买水果,查看水果信息,以及个人中心修改个人资料,在自己的后台查看自己的购买记录等。 水果购物网站管理员功能:个人中心管理,用户管理,会员管理,会员卡管理,开通会员记录管理,积分管理,水果管理,购买水果订单管理,积分兑换管理,积分兑换记录管理,加积分记录管理,减积分记录管理。 【环境需要】 1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境:IDEA,Eclipse,Myeclipse都可以。 3.tomcat环境:Tomcat 7.x,8.x,9.x版本均可 4.数据库:MySql 5.7/8.0等版本均可; 【购买须知】 本源码项目经过严格的调试,项目已确保无误,可直接用于课程实训或毕业设计提交。里面都有配套的运行环境软件,讲解视频,部署视频教程,一应俱全,可以自己按照教程导入运行。附有论文参考,使学习者能够快速掌握系统设计和实现的核心技术。
基于Matlab的双输入深度学习模型构建指南:处理序列与图像数据的创新性应用,Matlab双输入深度学习模型搭建指南:如何处理两种输入数据并实现创新与优势,Matlab搭建双输入深度学习模型,双输入网络。 相比普通的单输入网络,双输入网络能处理两种输入数据,在科研上也更具有优势和创新性。 如何用Matlab搭建双输入网络也是困扰本人很长时间的一个问题,现已弄明白。 注意,需要Matlab 2022b及以上版本,以下版本估计是都不行。 本程序是两个输入全为一维序列的情况(第二个输入序列是第一个输入序列的特征值,或者变后的序列)。 也可改为两边输入都是图像,或者一边输入图像,一边输入图像的一维特征序列。 本程序工作如下: 1、加载数据,两种输入数据一一对应,第二个数据是第一个数据做FFT之后的序列,属于一个类别。 两种数据样本数相等,序列长度不相等。 2、搭建双输入网络,此网络一边是CNN-LSTM,一边是CNN。 3、训练。 4、测试,输出准确率。 注:程序可直接运行,包教会和调通。 可以有偿修改为两边输入都是图像,或一边输入图像一边输入序列的模型。 可有偿替数据,调通程序。 程序注释详
包含十大管理49个过程组的输入与输出和解释,还有EVA铮值管理的公式汇总和解释