Repositioning jQuery UI Autocomplete on browser resize

Question

There is an issue if you open up an autocomplete drop down and also resize your browser window the autocomplete drop down does not reposition. Highlighted in this video: http://www.youtube.com/watch?v=d7rZYH0DgWE

I have looked at the documentation and cannot find a reposition method (in the jquery-ui documentation http://jqueryui.com/demos/autocomplete) that can be called within a $(window).resize() function call.

Is there an elegant soultion to this?

Answer 1

I would suggest just closing the results on a page resize.

$(window).resize(function() {
    $(".ui-autocomplete").css('display', 'none');
});

When a use changes the width of the window it will disappear and if they type again it will re-appear as it should, positioned correctly.

Answer 2

Looking at this again one way to solve this problem is just to call the autocomplete field to search on resize:

e.g

$(window).resize(function() {
    $( "#autocomplete-field" ).autocomplete( "search" );
});

This will reposition the autocomplete dropdown.

You may also wish to make sure autocomplete caches the results so it doesn't hit the database when searching again. And another thing to consider is calling autocomplete( "search" ) within a timeout function to improve ui responsiveness Cross-browser window resize event - JavaScript / jQuery