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";
}
});
}
);