Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jqueryUi autocomplete - custom data and display

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/

like image 470
Lorraine Bernard Avatar asked Jul 05 '12 17:07

Lorraine Bernard


People also ask

What is autocomplete UI?

ui-autocomplete : The menu used to display matches to the user. ui-autocomplete-input : The input element that the autocomplete widget was instantiated with. While requesting data to display to the user, the ui-autocomplete-loading class is also added to this element.

How can create autocomplete search box in jQuery?

Syntax: $("TagId"). autocomplete({ source : itemList // List of Words. })

What is autocomplete example?

A user types into an input, and the autocomplete “completes” their thought by providing full terms or results: this is the very base of an autocomplete experience. For example, try typing the letter “m” in the search box below. You can select suggestions like “macbook” and “mobile”.

How display image in jQuery ui autocomplete textbox in PHP?

Here we will make autocomplete textbox, in which make list pre-populated search result with image. This feature we will make by add custom html tag in jQuery UI autocomplete method by add _renderItem. Here we will use __renderItem method, by using this method we will add custom HTML code in autocomplete textbox.


1 Answers

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/

like image 198
Andrew Whitaker Avatar answered Oct 08 '22 15:10

Andrew Whitaker