Autocomplete in core is limited when it comes to show long list as result, there are various ways to get the long list, I am not getting in to that..
The issue is that if we apply overflow: auto; to the following div, it gives us a vertical scroll, now this scroll works fine in FF, but in IE & Chrome when we try to scroll the list as soon as we click on the scroll the autocomplete result popup diapears.
I have a patch to fix this.. but first we need to reproduce this behavior, just apply any where in CSS
#autocomplete ul{
overflow: auto;
max-height: 100px;
}
#autocomplete li{
white-space: pre-line;
}after refreshing a page try to run the string search in autocomplete field in any browser and you will find that scrolls are not working in Chrome and IE.
to fix this behavior run the patch
diff --git a/misc/autocomplete.js b/misc/autocomplete.js
index 8f7ac60..b52d6af 100644
--- a/misc/autocomplete.js
+++ b/misc/autocomplete.js
@@ -22,6 +22,16 @@ Drupal.behaviors.autocomplete = {
);
new Drupal.jsAC($input, acdb[uri]);
});
+
+ // fix autocomplete scrollbar issue
+ $('*').click(
+ function(event) {
+ if (!$(this).children('div:first').is('#autocomplete') && Drupal.settings.autocompleteCurrent) {
+ Drupal.settings.autocompleteCurrent.hidePopup();
+ Drupal.settings.autocompleteCurrent.db.cancel();
+ }
+ }
+ );
}
};
@@ -47,7 +57,7 @@ Drupal.jsAC = function ($input, db) {
$input
.keydown(function (event) { return ac.onkeydown(this, event); })
.keyup(function (event) { ac.onkeyup(this, event); })
- .blur(function () { ac.hidePopup(); ac.db.cancel(); });
+ .blur(function () { Drupal.settings.autocompleteCurrent = ac; });
};