By iub98 on

I'm currently building a website and I'm in need of a scrollbar for
the autocomplete widget in Content Taxonomy. After days of searching
for a solution, I've run out of options. Obviously, my programming skills
are almost non existent.

Here's what I've tried thus far. I've installed the 'Autocomplete
Elements' module. This module seems buggy as it does not work
at all. When enabled, it produces no results for my autocomplete
taxonomy terms. Maybe I missed a configuration step? I've also tried
some css. I've used the following:

#autocomplete {
height: 100px;
max-height: 100px;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
}

This worked fine in FF, but in IE, the drop down box disappears when I
click on the scrollbar. The scrollbar is a must as I will have
several hundred taxonomy terms.

Please contact me if you're interested in helping. We can discuss the bounty at that time. Thank you and take care.

⋅ Categories: Drupal 6.x

Comments

devsanjiv’s picture

devsanjiv commented

Please enable your contact tab..

iub98’s picture

iub98 commented

Yeah, that would probably help...done.

johnpitcairn’s picture

johnpitcairn commented

Basically, IE and Safari/Chrome (incorrectly) interpret a click on the scrollbar as being a click on the div, and the autocomplete code does its thing.

This patch against /misc/autocomplete.js is a fairly crude solution that works for me in Safari and IE8 - I've not tested in IE6/7 as we don't use those for editing. I do intend to look at a cleaner solution, but time hasn't allowed that so far.

autocomplete_scrollfix_6.x-1.23.patch:

--- autocomplete.js 2008-01-05 00:53:21.000000000 +1300
+++ autocomplete.js 2010-05-20 00:00:36.000000000 +1200
@@ -16,6 +16,16 @@ Drupal.behaviors.autocomplete = function
     new Drupal.jsAC(input, acdb[uri]);
     $(this).addClass('autocomplete-processed');
   });
+  
+  // 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(); 
+      }
+    }
+  );
 };
 
 /**
@@ -39,8 +49,7 @@ Drupal.jsAC = function (input, db) {
   $(this.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; });
 };
 
 /**
iub98’s picture

iub98 commented

John, your patch above worked great! Thank you so much for sharing. Now, onto my next battle. Take care!

Jason X’s picture

Jason X commented

There is a problem whith the patch : when you click on the submit button, or in the textfield, the value selected change. I don't no how to resolve it.

Jason X’s picture

Jason X commented

To resolve the problem with the changing value, I suppress the ! before the first condition of the if (in the patch) and it works fine for safari (I'm not using IE so I don't no fot it).

SuleymanK’s picture

SuleymanK commented

same on Drupal 7. Needs Patch.

qandeel’s picture

qandeel commented

Still the scrollbars gets disappear in chrome and IE9, anyone have a fix.. please share

Muhammad Qandeel Aslam
http://qandeelaslam.com

qandeel’s picture

qandeel commented

Here is a patch for D7, it was generated from D7.15, credit goes to the original code fixer for D6(John Pitcairn) above.
http://drupal.org/node/1809580

Muhammad Qandeel Aslam
http://qandeelaslam.com