Search jQuery

jQuery Forum

Developing jQuery UI

suurland

Setting height on Autocomplete

Answered

Need more info
Working on it
Answered

in Developing jQuery UI • 8 years ago

Hi there

Newbie question.

Is there a way to set the height of the dropdown list on the Autocomplete widget?

I've tried altering the CSS - this works but when I use the mouse to scroll my results, the list is collapsed and a choice is made. This is not what I want - I'd just like to scroll down the list.

Any ideas?

Regards

Carsten

Replies(10)

ke4roh

Re: Setting height on Autocomplete

8 years ago

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}

That works great if your target is FF, but isn't so slick for mouse operations in IE 7 or Chrome.

italiasky

Re: Setting height on Autocomplete

8 years ago

No solution for IE7... ?

kvad.im

Re: Setting height on Autocomplete

8 years ago

I just found workaround:

In addition to using css:

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}

do following changes to jquery.ui.autocomplete.js:

1) in method "_create" of ui.autocomplete add callback "stop_closing":

this.menu = $( "<ul></ul>" )
...
.menu({
...
stop_closing: function( event, ui ) {
clearTimeout( self.closing );
if ( self.element[0] !== doc.activeElement ) {
self.element.focus();
}
}

2) in method "_create" of ui.menu bind event "scroll" handler:

$.widget("ui.menu", {
_create: function() {
var self = this;
this.element
...
.scroll(function(e) {
self._trigger("stop_closing");
});

This solves problem for Chrome, but menu list still collapses in IE7 and Opera10 when scrollbar's arrow buttons pressed (but scroller grip becomes accessible).

kossdav

Réf.: Setting height on Autocomplete

8 years ago

I found a new workaround for this problem. Or rather, a complement to the already proposed bypass.

The problem of the menu disappearing when you scroll with the mouse is the fact that on some browsers clicking on the scroll bar remove the focus on the input field.

To avoid this, first I turn off the event "blur.autocomplete" on the input field.

var autocompleter = $("input#autocomplete");
autocompleter.unbind("blur.autocomplete") / / Prevent to close autocomplete when scrolling

I then bind a listener that will hide the menu when clicking on the body of the page.

$("body:not(.ui-autocomplete)").live.('click', function () (
autocompleter.autocomplete ("close");
));

So there!

This solution has the advantage of not requiring to modify the source code of jQuery UI ...

ficamu

Re: Réf.: Setting height on Autocomplete

8 years ago

autocompleter.unbind("blur.autocomplete")

Works fine for me,
Thanks for helping!

greight01

Re: Setting height on Autocomplete

8 years ago

autocompleter.unbind("blur.autocomplete")

This works fine in Firefox, but does not seem to work in IE or Chrome.

Any ideas?

Thanks

shroffdar..

Re: Setting height on Autocomplete

8 years ago

Alright so this is the update after trying all suggestions on these 3 threads.

http://forum.jquery.com/topic/autocomplete-max-elements-shown
http://forum.jquery.com/topic/setting-height-on-autocomplete
http://stackoverflow.com/questions/2310718/problem-jquery-ui-autocomplete-1-8-with-height-and-overflow-with-ie

Below is a good start. It actually showed me my scrollbar for the first time. I just pasted this style in jquery-ui.css and it started showing a scrollbar. You could also set width:250px to have the scrollbar width in line with the textbox width.

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}

Now second step was to make this work on IE and Chrome as there were many issues in it. It worked perfectly in Mozilla, but in IE and Chrome, as soon as one clicks the scrollbar/button, the autocompleter closes. This is due to the blur event of autocompleter getting called on click of scrollbar/button which closes it.

Now various suggestions have been provided to unbind the blur event and close the autocompleter on click of any element in body, some of which work as well, but i DO NOT want to unbind autocompleters blur event.
I have a lot of code written on the blur event, which i cannot remove.

Is there any other way to make this work without removing the blur event of autocompleter

Regards,
Darshan Shroff
shroffdarshan@gmail.com

shroffdar..

Re: Re: Setting height on Autocomplete

8 years ago

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> elements along with the drop down content.

This demo helped me
http://jqueryui.com/demos/autocomplete/maxheight.html

Regards,
Darshan Shroff
shroffdarshan@gmail.com
http://in.linkedin.com/in/darshanshroff