jQuery UI Autocomplete 体会

2012-08-31

jQuery UI Autocomplete 体验主要的参数jQuery UI Autocomplete常用的参数有：Source：用于指定数据来源，类

jQuery UI Autocomplete 体验
主要的参数

jQuery UI Autocomplete常用的参数有：

String：用于ajax请求的服务器端地址，返回Array/JSON格式 Array：即字符串数组或 JSON数组 Function(request, response)：通过request.term获得输入的值，response([Array])来呈现数据；(JSONP是这种方式)

其他不常用的就不罗列了。

使用方法

假如页面上有以下输入框：

AJAX请求通过指定source为服务器端的地址来实现，如下：
????????????}); ????????????result = result.concat($.makeArray(findedResults)); ????????} ????????response(result);//呈现结果 ????} });JSONP方式获取数据直接从官方DEMO拿来的，通过发送ajax请求到远程服务器，然后对返回结果进行处理，最后通过response来呈现：
?1234567891011121314151617181920212223$("#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种：
?123["cnblogs","博客园","囧月"] [{label: "博客园", value: "cnblogs"}, {label: "囧月", value: "囧月"}] [{label: "博客园", value: "cnblogs", id: "1"}, {label: "囧月", value: "囧月", id: "2"}]假如是第三种的话，还可以得到ui.item.id的值。
这些事件可以通过2种方式来绑定，如下：
?123456789101112// 在参数中 $("#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的代码：
?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354// 按逗号分隔多个值 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 体会