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/

Andrew Whitaker · Accepted Answer · 2012-07-06 02:21:22Z

12

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/

answered Jul 6, 2012 at 2:21

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gabriel Pichot Over a year ago

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

EyalAr · Accepted Answer · 2012-07-05 17:22:09Z

0

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

answered Jul 5, 2012 at 17:22

EyalAr

3,1801 gold badge24 silver badges30 bronze badges

1 Comment

Lorraine Bernard Over a year ago

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

White Elephant · Accepted Answer · 2012-07-05 17:23:56Z

0

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

answered Jul 5, 2012 at 17:23

White Elephant

1,3813 gold badges13 silver badges28 bronze badges

1 Comment

Lorraine Bernard Over a year ago

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

Collectives™ on Stack Overflow

jqueryUi autocomplete - custom data and display

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related