Cannot make links clickable in jQuery autocomplete

Question

I am overriding jQuery Autocomplete to display simple links (<a href=...>") and some extra formatting that will need to become more complex later.

Nothing happens when the links are clicked. Is there a way to remove whatever event handler or other code is intercepting clicks so that they behave as expected?

There are several related questions (eg #4536055) with good answers, but they deal with the default Autocomplete behavior. The source answer seems like a hack -- links should function like links.

My code:

$.widget( "custom.complete_custom", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            // Trigger a "See all" link if there are two many results
            var self = this;
            var too_long = false;
            if (items.length > 10){
                original_length = items.length;
                too_long = true;
                items = items.slice(0,10);
            }

            // Display each result as a link
            $.each( items, function( index, item ) {
                ul.append( "<li class='ui-autocomplete-category'><a href='/building/" + item.buildingcode + "'>" + item.buildingname + "</a></li>" );
            });

            // Add the "See all" link if necessary
            if(too_long) {
                ul.append( "<li class='ui-autocomplete-category see-all'><a href='/search/" + 'term' + "'><strong>See all " + original_length + " results</strong></a></li>" )
            } 
        }
    });


    // The autocomplete activator
    $( "#search" ).complete_custom({
    source: "/search/json",
        minLength: 2
    });

score 0 · Answer 1 · answered Jun 04 '13 at 16:06

Maybe it's too late, but maybe can be useful for other users.

We get it with this code:

$.ui.autocomplete.prototype._renderItem  = function( ul, item ) {   
                        var re = new RegExp("^" + "$&") ;
                        var t = item.label.replace(re,"<span>" + "$&" + "</span>");            
                        return $( "<li></li>" )
                            .data( "item.autocomplete", item )
                            .append( "<A>" + item.label + "</A>" )
                            .appendTo( ul );
                    };

Now, you can modify thinks inside "label" field of the array data.

We have added, for example, some new tables inside each label, but you can add links as well.

Bye

Michael Low · Answer 2 · 2011-04-10T16:52:58.927

0

The jQuery UI autocomplete uses a tags internally in quite a few places (looking at its JS and CSS), so trying to change the behavior of them in a way they didn't intend could work unpredictably. The _renderItem function wraps each autocomplete item in a tags already for one thing, so you'd be putting links inside links. I'm sure it's possible with time and effort, but when the other answer works and is easy to implement that's surely a better option ? Even if using a JS redirect rather than a straight link is a bit hack-ish.

edited Apr 10 '11 at 16:52

answered Apr 10 '11 at 16:40

Michael Low

24,276
16
82
119

That's true, the other answer is the better. But it seems to break down with the custom rendering; I'm not sure how to apply the select function to, say, the "See all" link. – Matt Hampel Apr 10 '11 at 20:01

Cannot make links clickable in jQuery autocomplete

2 Answers2