javascript - jqueryUi 自动完成 - 自定义数据和显示

Question

我的完整代码在这里:http://jsfiddle.net/HfNk9/13/

我正在寻找这个例子 jqueryUi autocomplete - custom data and display .

假设对象项目不同，它看起来像这样:

project = [
    {
        name: 'bar',
        value: 'foo',
        imgage: 'img.png'
    }
]

如果我设置 source = project 自动完成是指 project.value 而不是 project.name。
我应该如何改变这种行为？

---

var autocomplete = function(element, data) {
    var fixtures = [
        {
        avatar: "http://www.placekitten.com/20/20",
        name: 'aaaaaaaaa',
        value: 'bbbbbbbbb'}
    ];

    element.autocomplete({
        minLength: 3,
        source: function(request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response($.grep(fixtures, function(value) {
                return matcher.test(value.name);
            }));
        },
        create: function() {
            console.log(fixtures)
            element.val(fixtures.name);
        },
        focus: function(event, ui) {
            element.val(ui.item.name);
            return false;
        },
        select: function(event, ui) {
            element.val(ui.item.name);
            return false;
        }
    }).data('autocomplete')._renderItem = function(ul, item) {
        return $('<li></li>')
            .data('item.autocomplete', item)
            .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
            .appendTo(ul);
    };
};

autocomplete($('#auto'));

我的完整代码:http://jsfiddle.net/HfNk9/13/

Answer 1

您需要过滤与自动完成小部件默认搜索不同的属性(因为您已经注意到它是 name 或 value 当使用带有对象的源数组时).

您可以使用函数而不是数组作为源并以这种方式执行您自己的过滤:

element.autocomplete({
    minLength: 3,
    source: function(request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(fixtures, function(value) {
            return matcher.test(value.name);
        }));
    },
    create: function() {
        console.log(fixtures)
        element.val(fixtures.name);
    },
    focus: function(event, ui) {
        element.val(ui.item.name);
        return false;
    },
    select: function(event, ui) {
        element.val(ui.item.name);
        return false;
    }
}).data('autocomplete')._renderItem = function(ul, item) {
    return $('<li></li>')
        .data('item.autocomplete', item)
        .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
        .appendTo(ul);
};

示例: http://jsfiddle.net/QzJzW/