Autocomplete selecting an element when clicking in scrollbar

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 ?

use max-height instead.

.ui-autocomplete { 
    max-height: 250px; overflow-y: auto; overflow-x: hidden;
}
* html .ui-autocomplete { 
     height: expression( this.scrollHeight > 250 ? "250px" : "auto" ); /* sets max-height for IE */ 
}  

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.

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();
    }

Alright i finally got this working yesterday on IE and Chrome after spending close to 20 person hours on this. This was done -> without unbinding the blur event -> without migrating from jquery 1.4.2 to newer version (1.4.3/1.4.4) which was a risk considering the size of my project

I made some minimal changes to jquery.ui.autocomplete.js in my 1.4.2 lib. These changes were copied from the newest version of jquery.ui.autocomplete.js. I have attached the jquery.ui.autocomplete_modified.zip which worked for me. Please change the .zip extension to .js after downloading the file.

PS: Do not use the jquery.ui.autocomplete.js of newer version directly in your old library, that doesn't work. It shows some 'STRONG' html tags along with the drop down content.

The file is attached over here
http://forum.jquery.com/topic/setting-height-on-autocomplete#14737000001747027

Regards,
Darshan Shroff
shroffdarshan@gmail.com

just increase the width of the 'ac_results' and it will hide the y-overflow

.ac_results ul {
width: 180px;
/* 
increase width to hide overflow
*/
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;

}