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