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";
}
});
}
);
原文地址:https://www.cnblogs.com/haogj/p/2084384.html