本文主要介绍了jquery autocomplete简介，jquery ui autocomplete是jquery ui的自动完成组件，是我用过的最强大、最灵活的autocomplete，它支持本地的array/json数组、通过ajax请求的array/json数组、jsonp、以及function(最灵活)等方式来获取数据。
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);     }   }));
相关推荐：
ionic3 ui组件中autocomplete的使用方法
推荐10款常用的autocomplete示例用法，欢迎下载！
autocomplete用法汇总
以上就是jquery autocomplete实例简介的详细内容。