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

My full code is here: http://jsfiddle.net/HfNk9/13/

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

I am looking to this example jqueryUi autocomplete - custom data and display.

我期待这个例子jqueryUi自动完成 - 自定义数据和显示。

Let's suppose the object projects is different and it looks like this:

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

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

If I set source = project the autocomplete refers to project.value and not project.name.
How should I change this behaviour?

如果我设置source = project，则autocomplete引用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'));

My full code: http://jsfiddle.net/HfNk9/13/

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

3 个解决方案

#1

You need to filter on a different property than the autocomplete widget searches on by default (as you've noticed it's name or value when using a source array with objects).

您需要在默认情况下筛选与自动填充小部件搜索不同的属性（因为在使用带对象的源数组时，您已经注意到它的名称或值）。

You can use a function instead of an array as the source and perform your own filtering that way:

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

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

Example: http://jsfiddle.net/QzJzW/

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

#2

You should use the select property:

你应该使用select属性：

$("...").autocomplete({
    source: ...,
    select: function( event, ui ) { //when an item is selected
        //use the ui.item object
        alert(ui.item.name)
        return false;
    }
});

#3

The answer is in the source code to the page you've linked to. If you want to use the value of name instead of value then you would do something like this:

答案在您链接到的页面的源代码中。如果你想使用name的值而不是value，那么你会做这样的事情：

$( "#input" ).autocomplete({
    minLength: 0,
    source: projects,
    focus: function( event, ui ) {
        $( "#input" ).val( ui.item.value );
        return false;
    },
    select: function( event, ui ) {
        $( "#input" ).val( ui.item.value );
        return false;
    }
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.name + "</a>" )
        .appendTo( ul );
};

#1