如何使用对象数组作为jQuery UI AutoComplete的源

时间:2011-01-12 11:24:44

标签: jquery jquery-ui

如果我有像

这样的对象数组
var arrLinks = [
    { key: 1, url: "http://google.com" },
    { key: 2, url: "http://yahoo.com", title: "Yahoo" },
    { key: 2, url: "http://microsoft.com" }
];

我可以将它用作自动填充的来源吗?我尝试按照http://jqueryui.com/demos/autocomplete/#custom-data进行实施,但没有得到它http://jsfiddle.net/mvNNj/

1 个答案:

答案 0 :(得分:15)

你需要:

1 - 实际上在测试页面上包含jQuery + UI。

2 - 合并使用“自动填充器”用于查找匹配项的“标签”:

$(function() {
    var arrLinks = [
        {
        key: 1,
        url: "http://google.com",
        label: 'google'},
    {
        key: 2,
        url: "http://yahoo.com",
        title: "Yahoo",
        label: 'yahoo'},
    {
        key: 2,
        url: "http://microsoft.com",
        label: 'microsoft'}
    ];
    $("input[name=url]").autocomplete({
        source: arrLinks
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>").data("item.autocomplete", item).append("<a>" + item.url + "</a>").appendTo(ul);
    };
});

Your test page, working.