jQuery Autocomplete简介_动力节点Java学院整理
jquery ui autocomplete是jquery ui的自动完成组件,是我用过的最强大、最灵活的autocomplete,它支持本地的array/json数组、通过ajax请求的array/json数组、jsonp、以及function(最灵活)等方式来获取数据。
支持的数据源
jquery ui autocomplete主要支持字符串array、json两种数据格式。
普通的array格式没有什么特殊的,如下:
["bjpowernode","动力节点","李四"]
对于json格式的array,则要求有:label、value属性,如下:
[{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]
其中label属性用于显示在autocomplete弹出菜单,而value属性则是选中后给文本框赋的值。
如果没有指定其中一个属性则用另一个属性替代(即value和label值一样),如下:
[{label: "bjpowernode"}, {label: "李四"}] [{value: "bjpowernode"}, {value: "李四"}]
如果label和value都没有指定,则无法用于autocomplete的提示。
另外需要注意,对于从服务器端输出的json的key必须用双引号,如下:
[{"label": "动力节点", "value": "bjpowernode"}, {"label": "李四", "value": "李四"}]
否则可能会出现parsererror错误。
主要的参数
jquery ui autocomplete常用的参数有:
1.source:用于指定数据来源,类型为string、array、function
- string:用于ajax请求的服务器端地址,返回array/json格式
- array:即字符串数组 或 json数组
- function(request, response):通过request.term获得输入的值,response([array])来呈现数据;(jsonp是这种方式)
2.minlength:当输入框内字符串长度达到minlength时,激活autocomplete
3.autofocus:当autocomplete选择菜单弹出时,自动选中第一个
4.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\":\"bjpowernode\"},{\"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", "bjpowernode.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有一些事件,可用于在一些阶段进行额外的控制:
1.create(event, ui):autocomplete创建时,可以在此事件中,对外观进行一些控制
2.search(event, ui): 在开始请求之前,可以在此事件中返回false来取消请求
3.open(event, ui):autocomplete的结果列表弹出时
4.focus(event, ui):autocomplete的结果列表任意一项获得焦点时,ui.item为获得焦点的项
5.select(event, ui):autocomplete的结果列表任意一项选中时,ui.item为选中的项
6.close(event, ui):autocomplete的结果列表关闭时
7.change(event, ui):当值改变时,ui.item为选中的项
这些事件的ui参数的item属性(如果有的话)默认有label和value属性,不管在source中设置的数据是array还是json数组,如下3种:
["bjpowernode","动力节点","李四"] [{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}] [{label: "动力节点", value: "bjpowernode", 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),则需要绑定一些事件来进行额外处理:
1.在focus事件中返回false,避免输入框的值被autocomplete的单个值取代
2.在select事件中组合多个值
3.在元素的keydown事件做一些处理,理由同1
4.使用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); } }));
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。