jQuery UI Autocomplete 体验分享


Posted in Javascript onFebruary 14, 2012

支持的数据源
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
Javascript 相关文章推荐
jquery 回车事件实现代码
Aug 23 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 #Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 #Javascript
情人节之礼 js项链效果
Feb 13 #Javascript
jQuery.getScript加载同域JS的代码
Feb 13 #Javascript
理解JavaScript的prototype属性
Feb 11 #Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 #Javascript
基于jquery实现状态限定编辑的代码
Feb 11 #Javascript
You might like
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
jQuery 位置插件
2008/12/25 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
业务经理岗位职责
2013/11/11 职场文书
运动会入场解说词
2014/02/07 职场文书
校本课程教学计划
2015/01/19 职场文书
2015年教务工作总结
2015/05/23 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
演讲开头怎么书写?
2019/08/06 职场文书