Question

I have an issue with the close parameter of jQuery UI Autocomplete.

Essentially with the code in the close parameter, when the autocomplete is open, if i click a link the autocomplete dissapears but the link does not fire.

If i remove the code it works fine.

The JS runs through JS Lint fine and there is no console error.

Anyone have any ideas?

$('.mega-menu-search').autocomplete({
    source: window.searchTA.split(','),
    select: function( event, ui ) {
        megaMenuSearchAbort();
        megaMenuSearchTimeAndGo();
        lastSearch = $(this).val(); 
    },
    close: function(event, ui ) {
        // This is the troublesome code
        if($("#mega-menu-search-results").css("padding-top") !="0px") {
            $("#mega-menu-search-results").css("padding-top", "0px");
        }
    }
}).autocomplete("widget").addClass("mega-menu-autocomplete");   
Was it helpful?

Solution

Ok so i got a fix.

I am guessing that autocomplete must return false or stop propagation after running whatever function is in the close parameter.

In the code below i have removed the surplus if statement that was in my original code, although even with it left in, this fix works.

$('.mega-menu-search').autocomplete({
    source: window.searchTA.split(','),
    select: function( event, ui ) {
        megaMenuSearchAbort();
        megaMenuSearchTimeAndGo();
        lastSearch = $(this).val(); 
    },
    close: function(event, ui ) {

        // Changed code
        if(e.target.nodeName != 'A') {
            $("#mega-menu-search-results").css("padding-top", "0px");
        }
        //

    }
}).autocomplete("widget").addClass("mega-menu-autocomplete");
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top