jqueryUi autocomplete - custom data and display

Question

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/

Oshiro

Answer 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/

Mockery

Another thing, the "a" tag in the render is necessary, without it things like focus method or others will fail (no ui.item set). – Hydroelectric

Answer 2

You should use the select property:

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

Treasatreason

Thanks, I did try but it does not work. I posted my full code. – Oshiro

Answer 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:

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

Phonometer

Thanks, I did try but it does not work. I posted my full code. – Oshiro