Hi !
I'm very-very fresh user of jQuery and jQuery UI. So excuse me if I'm inventing the wheel and my solutions may be made in "conventional" way.
I like the idea of setting the max menu height in the CSS. But the problem is that when the list became small, the menu div is not resized and looks not so aesthetic.
To solve this I've created two CSS classes, that looks like this:
.ui-autocomplete-scroll
{
height
:
200px
;
overflow-y
:
scroll
; }
.ui-autocomplete-noscroll
{
overflow-y
:
auto
; }
and added the following in the _suggest function:
if
(items.length > 20)
ul.removeClass(
'ui-autocomplete-noscroll'
).addClass(
'ui-autocomplete-scroll'
);
else
ul.removeClass(
'ui-autocomplete-scroll'
).addClass(
'ui-autocomplete-noscroll'
);
I think that it has sense to add the max number of items as a property to the options object.
One additional note.
When the selection is made, the text that appear in the textbox is the value, not the label. So the user, selected the word "Boston" from the suggestions list, suddenly will see the number representing the code of the city.
To solve this I've changed setting the value from
self.element.val(item.value);
to
self.element.val(item.label);
in focus and selected event handlers.
The value (code) I assign to the external variable in the selected event user handler, and clean up in the open event user handler.
Regards,
Astor