摘自:http://blog.sina.com.cn/s/blog_62a8fd490100ffz0.html
http://kaobian.iteye.com/blog/983337
$(document).ready(function() {
//文本框的id url为你要提交的action地址
$("#email").autocomplete(url, {
dataType : 'json', // 必须填写,不然默认的是text
autoFill : true, // 自动填充 可选
extraParams : {
key: function (){
return $('#email').val();
}
},//支持像后台传递参数,key为你后台接收参数的名称
parse : function(data) { // 处理返回的json串,以供后续的使用
var rows = []; // 处理后 返回的一个 数组
for ( var i = 0; i < data.my.length; i++) { // 如果你返回的是一个 类似{'my':[{'name':'value1'},{'name':'value2'}]}
rows[rows.length] = {
data : data.my[i].name, //返回的参数,供后续的函数调用
value : data.my[i].name+"---------", //鼠标经过时 在 输入框显示的值
result : data.my[i].name+"====" //选中后在 输入框显示的值
}
}
return rows;
},
formatItem : function(data, i, total) {
return data;
},
formatMatch : function(data, i, total) {
return data;
},
formatResult : function(data) {
return data;
}
});
});
var emails = [
{ name: "Peter Pan", to: "peter@pan.de" },
{ name: "Molly", to: "molly@yahoo.com" },
{ name: "Forneria Marconi", to: "live@japan.jp" },
{ name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
{ name: "Don Corleone", to: "don@vegas.com" },
{ name: "Mc Chick", to: "info@donalds.org" },
{ name: "Donnie Darko", to: "dd@timeshift.info" },
{ name: "Quake The Net", to: "webmaster@quakenet.org" },
{ name: "Dr. Write", to: "write@writable.com" }
];
//emails的数组格式如上,formatItem代表的是显示的格式,formatMatch表示匹配的内容,formatResult表示结果的内容
$("#suggest13").autocomplete(emails, {
minChars: 0,
width: 310,
matchContains: true,
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
},
formatMatch: function(row, i, max) {
return row.name + " " + row.to;
},
formatResult: function(row) {
return row.to;
}
});
参数说明:
* minChars (Number):
* width (Number):
* max (Number):
* delay (Number):
* autoFill (Boolean):
* mustMatch (Booolean):
* matchContains (Boolean):
* selectFirst (Boolean):
* cacheLength (Number):
* matchSubset (Boolean):
* matchCase (Boolean):
* multiple (Boolean):
* multipleSeparator (String):
* scroll (Boolean):
* scrollHeight (Number):
* formatItem (Function):
* formatResult (Function):
* formatMatch (Function):
* extraParams (Object):
* result (handler)
一个自动完成数据调用sohu视频接口数据的例子: