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

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

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?

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/