Cant Figure Out Why jQuery.UI AutoComplete Positioning Breaks Down in IE 9 - It Works in IE 8, Firefox, Chrome -

Question

The Page Can Be Found at: http://www.geobytes.com/index.php/moversratesballparkestimator

I have two autocomplete boxes on the above page. The Moving To City and Moving From City Boxes. After typing in three characters the Autocomplete does an Ajax call for city values. In IE 8, Chrome, And Firefox, the returned list is displayed below the input text box. I should mention this element is absolutely positioned. In IE 9 the list displayes at the windows 0 , 0 location (top left corner). I checked out the jQuery UI Autocomplete demos and they display properly in IE 9. So I am totally lost and any help would be greatly appreciated.

The only css changes I made were:

.ui-menu .ui-menu-item a,.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
text-align:left;
font-size:14px;
}

.ui-autocomplete-loading { background: white url("/images/ui-anim_basic_16x16.gif") right center no-repeat; }

and the javascript call is:

jQuery( "#ff_elem184" ).autocomplete({
            source: function( request, response ) {
                jQuery.ajax({
                    url: "/AJAX_query_city.php", 
                    dataType: "json",
                    data: {
                        value: request.term
                    },
                    success: function( data ) {
                        response( data ); 
                    }
                });
            },
            minLength: 3,
            select: function(event, ui) {
                var selectedObj = ui.item;
                jQuery( "#ff_elem184" ).val(selectedObj.value);
                ff_getdistance(selectedObj.value,jQuery( "#ff_elem189" ).val());
                return false;
                },
            open: function() {
                jQuery( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                jQuery( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
        jQuery( "#ff_elem184" ).autocomplete( "option", "delay", 100 );

        jQuery( "#ff_elem189" ).autocomplete({
            source: function( request, response ) {
                jQuery.ajax({
                    url: "/AJAX_query_city.php", 
                    dataType: "json",
                    data: {
                        value: request.term
                    },
                    success: function( data ) {
                        response( data ); 
                    }
                });
            },
            minLength: 3,
            select: function(event, ui) {
                var selectedObj = ui.item;
                jQuery( "#ff_elem189" ).val(selectedObj.value);
                ff_getdistance(jQuery( "#ff_elem184" ).val(),selectedObj.value);
                return false;
            },
            open: function() {
                jQuery( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                jQuery( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
        jQuery( "#ff_elem189" ).autocomplete( "option", "delay", 100 );

Like i said I am stuck because i use it in accordance with the docs and the demos work while mine do not. Now I should also mention that this is running in breezingforms component in joomla 1.6 and there is quite a bit of other jQuery javascript at work on this page. Thanks in advance for any help or suggestions.

Answer 1

I faced the same problem. It vanished when I included jquery.ui.position.js. It might be the reason it breaks somewhere.

Answer 2

A little late, but I was having the same problem only in all browsers. Mine was caused by having the jquery.dimensions plugin included on my page. Inside the ui.autocomplete _suggest function, it was calling the wrong ui.position function. Removed the dimension plugin, which according to the doc page has been included in jquery core, and problem was resolved.

Answer 3

IE 9.0 uses the body element to measure top and left values for offset(), but uses the window edge when to measure top and left distances when positioning an item absolutely.

Fix the body width. It might work.

body {
    width: 900px;
}