CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-autocomplete
Guy Sopher
Guy Sopher

Reputation: 4462

jquery ui autocomplete open event not firing

I am using the jQuery UI Autocomplete plugin.

Everything is working fine but I would like to add a box in the end saying "Find more results".

I am trying to use the built-in open event to append the box into the opened <ul>, but the event never fires (the autocomplete list opens and is fully functional, the only problem is that the open event never fires.)

My code looks like this:

        $( "#q" ).autocomplete({
            source: function(request, response) {
                var results = $.ui.autocomplete.filter(userFriends, request.term);
                response(results.slice(0, 4));
            },
            minLength: 2,
            appendTo: '.searchbox',
            select: function (event, ui){
                window.location.href = '/u/'+ ui.item.value;
                return false;
            },
            focus: function (event, ui) {
                return false;
            },
            open: function (event, ui){
                console.log("AutoComplete Opened");
            }
        })

        .data('autocomplete')._renderItem = function(ul, item) {
            return $('<li>')
                .data('item.autocomplete', item)
                .append(
                '<a>' +
                    '<div>' +
                    '<div><img src="' + item.img + '" alt="" width="50" onerror="onErrorFixProfileImage(this)"/></div>' +
                    '<div>' + item.label + '</div>' +
                    '</div>' +
                    '</a>'
            )
            .appendTo(ul);
        };

Does anyone know about reasons that this event will not fire?

Thanks!

Upvotes: 0

Views: 6941

Answers (3)

Guy Sopher
Guy Sopher

Reputation: 4462

A late update, I had a plugin installed called jquery.dimensions, it caused many issues with jquery-ui methods. Removing it resolved the problem

Upvotes: 1

danwellman
danwellman

Reputation: 9253

As a test, have you tried binding the event outside of the plugin initialisation? E.g:

$( "#q" ).on( "autocompleteopen", function( event, ui ) {
    console.log("AutoComplete Opened");
} );

Edit

You could try prevent default in the other events instead of returning false:

select: function (event, ui){
    window.location.href = '/u/'+ ui.item.value;
    event.preventDefault();
},
focus: function (event, ui) {
    event.preventDefault();
},

Upvotes: 1

Alberto De Caro
Alberto De Caro

Reputation: 5213

I have tested a simplified autocomplete adding your open method. It works fine, and the messages are correctly written in the console:

(function(){
    var aTags = ['java', 'javascript', 'actionscript', 'typescript', 'jscript', 'vbscript'];
    $('#tags').autocomplete({
        delay: 50
        , source:aTags
        , select: function(event, data){
            var $p = $('<p></p>').html(data.item.value).css({'display': 'inline-block', 'background-color': '#a0a0a0', 'color': '#ff0000'});
            $(event.target).after($p);
        }
        , open: function (event, ui){
            console.log("AutoComplete Opened");
        }
    });
})()​

Demo.

Upvotes: 0

Related Questions