Repositioning jQuery UI Autocomplete on browser re

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

Calling the autocomplete field to search on resize works for me. One thing to add: Make sure that search is only performed on resize when a search result is visible. Otherwise, search is executed even after having selected one item from the result box.

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

Answer 3

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 4

Here is another solution if you don't want to redo the search or close the window.

$(window).resize(function() {
  var position = $("#autocompleteField").offset();
  var properties = { left: position.left,
                     top: position.bottom };
  $(".ui-autocomplete").css(properties);
});

Answer 5

Yes it is possible, but it's very tricky. You must alter both the css and plugin. It's default functionality sets the top and right attributes. You must alter the plugin to position the div ( or ul ) relatively to the document's width and height. (ie top:50%, right:50%; margin-left:-500px; margin-top:-100px).

You can also destroy the division on resize if you don't want to mess it up. It will reappear on change based on the document's new width and height