Add a link to a JQueryUI autocomplete item

Posted by Tordek on Stack Overflow See other posts from Stack Overflow or by Tordek
Published on 2010-03-23T02:00:04Z Indexed on 2010/03/23 2:01 UTC
Read the original article Hit count: 562

When a user starts typing on the searchbox, the suggestion page returns the latest item from all collections matching that nama, plus other data.

I'd like to show that item (along its image), and a link to "see all items from this collection".

I can do (most of) that with the following code:

$('#search').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: suggesturl,
            dataType: 'json',
            data: request,
            success: function (data) {
                response(data.map(function (value) {
                    return {
                        'label': '<img src="' + value.thumbsmall + '" />' + value.name + '<a href="/">More items from this collection...</a>',
                        'value': value.fullname
                    };  
                }));
            }   
        }); 
    },  
    minLength: 3
})

The problem is that, although the link appears in the box, when it's clicked it gets ignored, and the default select action is executed (the item's value is put into the textbox).

© Stack Overflow or respective owner

Related posts about jquery-ui

Related posts about jQuery