Add a link to a JQueryUI autocomplete item

Question

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).

Answer 1

Seems like you have a couple options. First, you can specify your own select action, using a select option on the autocomplete initializer.

$(selector).autocomplete({
    source: ... ,
    select: function(value, data){
          if (typeof data == "undefined") {
              emitMessage('You selected: ' + value + "<br/>");
          } else {
              emitMessage('You selected: ' + data.item.value + "<br/>");
          }
    }
});

If that is not sufficient, for some reason, then you can render your own content for the autocomplete list, and in that way get as much control as you need.
You do that by monkey-patching the _renderItem fn, which is what autocomplete calls to render each item in the list. Check this answer for how to do it. It works in v1.8rc3.

I suppose in _renderItem you could render a clickable <span>, and attach any logic you like to the click event.

If you go that route, you may have a need to turn OFF the default click action. I think autocomplete uses an <a> for the element that provides the click event. In that case, you'll need to unset that click handler.