在 jQuery UI AutoComplete 中,除了直接使用字符串还可以使用自定义的数据。
自定义的数据
假设我们自定义的数据格式如下所示:
每个数据有四个属性,我们希望取得 label 属性的值,desc 的内容被用来作为说明。icon 是一个图标,value 是准备对象的标识。
{
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 内容,下面的例子演示了使用列表的技巧。
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 事件
当我们在提示选项中移动的时候,被指向的选项得到焦点,但是还没有被选中的时候,将会触发这个事件。默认的处理是当使用键盘移动的时候,焦点项目的值将会替换掉输入框中的值。我们可以提供一个函数来替换掉这种行为,比如,在使用鼠标的时候也可以。
minLength: 0 ,
source: projects,
focus: function (event, ui) {
$( " #project " ).val(ui.item.label);
return false ;
}
});
project 是输入框的 id,ui.item 就是当前得到焦点的数据对象。返回 false 防止被更新。
select 事件
当一个项目被选中的时候,将会触发这个事件,事件的参数 ui.item 表示被选中的数据对象,默认的处理是使用这个值替换掉输入框中的内容。我们可以提供一个函数完成自己的处理。下面的例子就分别使用了自定义对象的各个属性来分别处理。将对象的各个属性分别设置到多个位置。
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 的参数。
var url = " serviceHandler.ashx " ;
var cache = {}, lastXhr;
$( " #auto " ).autocomplete({
minLength: 2 ,
source: function (request, response) {
var term = request.term;
request.other = " 12345 " ;
}
});
}
);