problem jquery.ui.autocomplete 1.8 with height and overflow with IE

Question

Hello,

I have a probleme with jquery.ui.autocomplete 1.8 rc2 in IE7 or IE8 with the following CSS (inside jquery.ui.autocomplete.css) :

.ui-menu { list-style:none; padding: 2px; margin: 0;display:block; height:200px; overflow:scroll; }

I'm using the demo from the project called : demos\autocomplete\remote-jsonp.html

It's working perfect with firefox but with IE7 or 8, each time I click on the scroll bar to see the end of the list, it selects an element instead of scrolling down.

Do you please have a solution to have a fixed height with jquery.ui.autocomplete and a scroll bar working with IE ?

Thank you very much

Answer 1

I had the same issue when scrollbar was used for autocomplete. And when I/user used scrollbar buttons - autocomplete list was hidden automatically. FYI: test was in FF3.5

So as quick solution I commented bind("blur.autocomplete", function( event ) ... in jquery.ui.autocomplete.js and this fixed this issue.

Answer 2

Try this solution: http://forum.jquery.com/topic/setting-height-on-autocomplete#14737000000891166

Answer 3

This bug is fixed in the JQuery 1.8.2 release.

If you can't upgrade to 1.8.2, this hack worked for me:

    $("body").click(function () {
        HideAutoCompleteHack();                
    });

    $(document).keyup(function (e) {
        if (e.keyCode == 27) { //esc
            HideAutoCompleteHack();
        }
    });

    function HideAutoCompleteHack() {
        $(".ui-autocomplete").hide();
    }