How can I use a array of objects as source for jQuery UI AutoComplete

Question

If I have a array of objects like

var arrLinks = [
    { key: 1, url: "http://google.com" },
    { key: 2, url: "http://yahoo.com", title: "Yahoo" },
    { key: 2, url: "http://microsoft.com" }
];

Can I use it as the source for autocomplete? I tried implementing in following http://jqueryui.com/demos/autocomplete/#custom-data but didn't get it http://jsfiddle.net/mvNNj/

karim79 · Accepted Answer · 2011-01-12 11:33:08Z

15

You need to:

1 - Actually include jQuery + UI on your test page.

2 - Incorporate the use of 'labels' which the Autocompleter uses to find matches:

$(function() {
    var arrLinks = [
        {
        key: 1,
        url: "http://google.com",
        label: 'google'},
    {
        key: 2,
        url: "http://yahoo.com",
        title: "Yahoo",
        label: 'yahoo'},
    {
        key: 2,
        url: "http://microsoft.com",
        label: 'microsoft'}
    ];
    $("input[name=url]").autocomplete({
        source: arrLinks
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>").data("item.autocomplete", item).append("<a>" + item.url + "</a>").appendTo(ul);
    };
});

Your test page, working.

answered Jan 12, 2011 at 11:33

karim79

343k67 gold badges420 silver badges409 bronze badges

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

4 Comments

Jiew Meng Over a year ago

I see that I still need to add a label to my array?

Jiew Meng Over a year ago

@naveen, yes I usually use the Add Resources accordian and paste in the google cdn css link imgur.com/K6bha.jpg

Jiew Meng Over a year ago

you mean adding the jQuery UI CSS into jsFiddle? See jsfiddle.net/FHEYt

bm1729 Over a year ago

I think with the latest version of jquery-ui you need to use .data("ui-autocomplete").renderItem = ...

Collectives™ on Stack Overflow

How can I use a array of objects as source for jQuery UI AutoComplete

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related