jQuery UI AutoComplete 中使用自定义的数据

在 jQuery UI AutoComplete 中，除了直接使用字符串还可以使用自定义的数据。

自定义的数据

假设我们自定义的数据格式如下所示：

每个数据有四个属性，我们希望取得 label 属性的值，desc 的内容被用来作为说明。icon 是一个图标，value 是准备对象的标识。

var projects = [
{
value: " jquery " ,
label: " jQuery " ,
desc: " the write less, do more, JavaScript library " ,
icon: " jquery_32x32.png "
},
{
value: " jquery-ui " ,
label: " jQuery UI " ,
desc: " the official user interface library for jQuery " ,
icon: " jqueryui_32x32.png "
},
{
value: " sizzlejs " ,
label: " Sizzle JS " ,
desc: " a pure-JavaScript CSS selector engine " ,
icon: " sizzlejs_32x32.png "
}
];

 自定义显示格式

首先，我们可以自定义数据的显示格式。通过重新定义提示框的 _renderItem 方法，可以自定义提示的显示方式，在我们的例子中，每个数据是一个对象，我们希望提示对象的 label 属性值, 然后在下一行显示对象的 desc 内容，下面的例子演示了使用列表的技巧。 

$( " #project " ).autocomplete({
source: projects
})

$( " #project " ).data( " autocomplete " )._renderItem = function (ul, item) {
return $( " <li></li> " )
.data( " item.autocomplete " , item)
.append( " <a> " + item.label + " <br> " + item.desc + " </a> " )
.appendTo(ul);
};

focus 事件

当我们在提示选项中移动的时候，被指向的选项得到焦点，但是还没有被选中的时候，将会触发这个事件。默认的处理是当使用键盘移动的时候，焦点项目的值将会替换掉输入框中的值。我们可以提供一个函数来替换掉这种行为，比如，在使用鼠标的时候也可以。

$( " #project " ).autocomplete({
minLength: 0 ,
source: projects,
focus: function (event, ui) {
$( " #project " ).val(ui.item.label);
return false ;
}
});

project 是输入框的 id，ui.item 就是当前得到焦点的数据对象。返回 false 防止被更新。

select 事件

当一个项目被选中的时候，将会触发这个事件，事件的参数 ui.item 表示被选中的数据对象，默认的处理是使用这个值替换掉输入框中的内容。我们可以提供一个函数完成自己的处理。下面的例子就分别使用了自定义对象的各个属性来分别处理。将对象的各个属性分别设置到多个位置。

$( " #project " ).autocomplete({
minLength: 0 ,
source: projects,
focus: function (event, ui) {
$( " #project " ).val(ui.item.label);
return false ;
},
select: function (event, ui) {
$( " #project " ).val(ui.item.label);
$( " #project-id " ).val(ui.item.value);
$( " #project-description " ).html(ui.item.desc);
$( " #project-icon " ).attr( " src " , " images/ " + ui.item.icon);

return false ;
}
})

增加自定义的参数

当使用一个函数来作为数据源的时候，我们将会得到两个参数，其中一个是 request 对象，默认情况下，这个对象只有一个名为 term 的属性，表示用户已经输入的内容，在这个函数中，我们可以为 request 对象增加一个自定义的属性，其值表示我们自己额外的参数，这个名值对将会被 autocomplete 一起发送到服务器上。在下面的例子中，我们增加了一个名为 other ，值为 12345 的参数。

$( function () {

var url = " serviceHandler.ashx " ;
var cache = {}, lastXhr;
$( " #auto " ).autocomplete({
minLength: 2 ,
source: function (request, response) {
var term = request.term;

request.other = " 12345 " ;
}
});
}
);