- 浏览: 450406 次
- 性别:
- 来自: 湖南
最新评论
-
okhaoba:
show log 后可以在change history lis ...
如何把修改过的文件通过svn导出 -
XDKS59:
博主 我是用ssm写的不知道后台该怎么写 能帮帮我吗
fullCalendar制作一款简单的日历日程 -
会飞的鸭子20125:
很有帮助,谢谢
struts1的bean标签库 -
zxjlwt:
学习了素人派http://surenpi.com
Velocity的基本用法 -
spring_springmvc:
如何在java Web项目中开发WebService接口,地址 ...
Webservice接口开发简单例子
jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。
普通的Array格式没有什么特殊的,如下:
["cnblogs","博客园","囧月"]
对于JSON格式的Array,则要求有:label、value属性,如下:
[{label: "博客园", value: "cnblogs"}, {label: "囧月", value: "囧月"}]
其中label属性用于显示在autocomplete弹出菜单,而value属性则是选中后给文本框赋的值。
如果没有指定其中一个属性则用另一个属性替代(即value和label值一样),如下:
[{label: "cnblogs"}, {label: "囧月"}] [{value: "cnblogs"}, {value: "囧月"}]
如果label和value都没有指定,则无法用于autocomplete的提示。
另外需要注意,对于从服务器端输出的JSON的key必须用双引号,如下:
[{"label": "博客园", "value": "cnblogs"}, {"label": "囧月", "value": "囧月"}]
否则可能会出现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为服务器端的地址来实现,如下:
$("#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数组
// 本地字符串数组 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方式获取数据(模仿新浪微博的登录)
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来呈现:
$("#jsonp").autocomplete({ source: function(request, response) { $.ajax({ url: "http://ws.geonames.org/searchJSON", 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种:
["cnblogs","博客园","囧月"] [{label: "博客园", value: "cnblogs"}, {label: "囧月", value: "囧月"}] [{label: "博客园", value: "cnblogs", id: "1"}, {label: "囧月", value: "囧月", id: "2"}]
假如是第三种的话,还可以得到ui.item.id的值。
这些事件可以通过2种方式来绑定,如下:
// 在参数中 $("#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的代码:
// 按逗号分隔多个值 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
- jqueryui-autocomplete-demo.zip (122.3 KB)
- 下载次数: 12
发表评论
-
文件下载用ajax请求后没响应
2019-08-16 10:14 1000文件下载用ajax请求后没响应 // $.ajax ... -
使用easyui datagrid 遇到的那些问题
2019-08-09 16:00 682问题一: easyui datagrid列头可拖动, 引 ... -
css :before的用法
2019-04-19 18:14 700<style> ol>li { ... -
把json中的对象按从from到to的顺序排序
2015-08-12 10:46 1763<script> //把数据中的对象按从 ... -
js图片放大镜效果-类似淘宝放大镜
2014-03-31 15:31 1685<%@ page language="ja ... -
jquery的get异步请求函数中使用return不起作用
2014-03-27 16:27 1605jquery的get异步请求函数中使用return不起作用, ... -
ueditor的使用及常见问题
2014-03-27 00:01 139401、js错误:“wordCountMsg”对象为null ... -
改造之后的fullCalendar(改事件背景、标题自定义、无星期、左右按钮)
2013-07-02 15:31 34399这是一款改造后的fullCalendar,这个样式是应用了 ... -
fullCalendar制作一款简单的日历日程
2013-06-26 09:50 10371//说什么都没有例子直观,这是个比较简单的日历日程,附件为 ... -
jquery文件上传例子(两种方式)
2013-03-20 11:09 166717<html xmlns="http://ww ... -
js下拉级联例子
2013-03-19 18:05 1501<html xmlns="http://w ... -
js看书笔记
2013-01-07 11:55 1567JavaScript和DOM编程艺术 1、W3C标准:只要 ... -
struts1的logic标签库
2012-11-09 11:29 1266<logic:iterate> <lo ... -
struts1的bean标签库
2012-11-09 11:29 4546<bean:header> <bea ... -
JS 代码调试经验总结(菜鸟必读)
2012-07-10 15:59 1207JS 代码调试经验总结(菜鸟必读) ... -
jqueryUI插件中Dialog的运用
2012-07-05 10:55 2854Jquery UI dialog 参数 ... -
单击查看放大图片js效果
2012-04-10 12:47 11751<%@ page language="java ... -
HTML5的常用标签
2012-03-27 17:02 1917以下为附件中的一些例子,只要在dreamweaver中编写就可 ... -
为表格中的某一行设置边框
2012-03-14 14:23 5003为表格中的某一行设置边框,主要是运用 style=" ... -
由上往下无间隙滚动文字
2012-03-06 16:46 1516由上往下无间隙滚动文字 <!DOCTYPE html ...
相关推荐
jQuery UI Autocomplete是jQuery UI的自动完成组件演示代码
jquery.autocomplete.js 、jquery.autocomplete.css
jquery ui autocomplete实现自动填充
jQuery UI Autocomplete 1.8.16 中文输入修正代码,使用jQuery UI Autocomplete的朋友可以参考下
支持的数据源 jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。 普通的Array格式没有什么特殊的,如下: 代码如下: [“cnblogs”,”博客园”,”囧月”] 对于JSON格式的Array,则要求有:label、value...
介绍 在 jQuery UI 的最近更新中增加了自动... jQuery UI 的下载地址:http://jqueryui.com/download 一.基本配置 一般来说,引用独立的脚本可以减小页面的尺寸,我们这里使用独立的脚本。对于 autocomplete 来说,涉及
做界面效果非常好的jquery工具,在jquery上下载的源码,直接能用
javascript 实现Autocomplete 源代码。可以嵌入任何大多数ASP.net,java的系统中。携程网效果。但是Microsoft Dynamics CRM 4.0例外。 Microsoft Dynamics CRM 4.0用的以后推出。
NULL 博文链接:https://zyssnh.iteye.com/blog/2029229
jQuery UI AutoComplete 自动完成使用小记,使用jquery的朋友实现搜索自动完成等功能的朋友可以参考下。
jquery autocomplete官方版(源代码+示例) 自动补充功能非常实用
NULL 博文链接:https://shihuan830619.iteye.com/blog/1629637
在FF下,切换到中文输入法,再输入中文,是不能立即自动查询,需要按下其他按键,比如CTRL,后来,通过修改源代码即可修复这个问题
最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现。 因为我是WEB前端小白,遇到一个问题很久也没解决掉,所以特...
jQuery ui autocomplete 组件扩展代码利用 String.prototype.localeCompare 来取汉字的声母。如果浏览器不支持此API,可以在source中传一个sm来指定声母。##可选扩展中文不合适把source的value作为展示结果。这里...
3.3.2 JQuery UI Autocomplete(自动完成) 56 3.3.3 JQuery UI Button(按钮) 63 3.3.4 JQuery UI Datepicker (时间控件) 69 3.3.5 JQuery UI Dialog (对话框) 79 3.3.6 JQuery UI Menu (JQuery菜单) 88 3.3.7 ...
JQuery UI之Autocomplete使用详解