Autocomplete popup position

This works only if the autocomplete field is not positioned directly at the left bottom...

  if($.browser.msie == true && $.browser.version.substr(0,1) == 6){
    $(this.popup).css({
      position: 'absolute',
      left: this.input.offsetLeft + 'px',
      top: this.input.offsetTop + 84 + 'px',
      width: (this.input.offsetWidth - 4) + 'px',
      display: 'none'
    });
  }
  else {      
    $(this.popup).css({
      position: 'absolute',
      left: this.input.offsetLeft + 'px',
      top: this.input.offsetTop + 22 + 'px',
      width: (this.input.offsetWidth - 4) + 'px',
      display: 'none'
    });
  }

I detected this bug also in IE8, so I changed the patch a little.
I tested the patch on IE6, IE7, IE8, Chrome 3 and FF 3.5 and it is working fine.

the if condition excludes the browsers that do not have this issue, so the value can not be equal to 8.

#4: 625170_autocomplete-popup-position_4.patch queued for re-testing.

The patch solves the trouble I had with the positioning. Thanks!

@NiklasBr: care to mark as RTBC? Thanks.

Sure. But I am not a core contributor… Hope that is ok.

Can't you do it without browser detection?

Yes, but we need to set input.form-autocomplete position to relative, so IE6/7 get the offsetTop and offsetLeft right.

I believe this is the issue with IE7: http://bit.ly/9ZsqJl
Forcing the hasLayout on div#page resolves this issue for Seven theme, but it's better to rely only on autocomplete.js to get the position right.

Since the popup is always within the same containing DOM element as the autocomplete input, we can use jQuery's position().

Looking good. Also added correct width.

For what it's worth, I've implemented the patch in #15 on my live 6.17 installation. (I ignored the line that says this.popup = $('<div id="autocomplete"></div>')[0]; because I'm assuming that's D7)

The result: it works! Tested in FF3, Safari and Chrome and IE6 (all Win XP). (All I wanted is to display the forms inline with their labels and that created problems with autocomple positioning.) But there's a small hickup in IE6: if you have another form underneath the autompleting one that is a select form, then the list of autocomplete suggestions appears underneath that other select form. I don't know if I should add a z-index or overflow css somewhere of not.

Other than that, just letting you know that the patch in #15 seems to work for D6.17 . I didn't test any other patches here.
It would be nice to have a solution to this included in the future D6.x releases too, cause I think many people will stick with D6 for another 2 years.

Badly needed.

+++ misc/autocomplete.js	16 Jun 2010 11:16:47 -0000
@@ -172,6 +172,8 @@
+  var input = $(this.input);

The variable name should be $input, if it is a jQuery object.

So, position is correct, but input is not.

+++ misc/autocomplete.js	16 Jun 2010 11:16:47 -0000
@@ -180,11 +182,12 @@
   this.popup = $('<div id="autocomplete"></div>')[0];

So does #autocomplete already receive position:absolute and it's parent container position:relative ?

Powered by Dreditor.

I applied the patch in #15 manually to Drupal 6.19 and it works.

The code inside Drupal.jsAC.prototype.populatePopup = function () { is sligthtly different in Drupal 6.19 so I had to make the changes from the patch manually, but it works so this should also be commited to Drupal 6.

Also, whenever you use parseInt(), you have to specify the data value format.

This needs to be fixed in D6 also, so here is a patch :)

Committed to CVS HEAD. Thanks.

Now to D6. See #22.

Proper patch this time.

Last patch didn't help me. I have Locations module installed and I'm collecting user's city information using autocomplete field. List of cities displays right under label for input field. After applying this patch autocomplete div started to appear somewhere right from input if FF3.5 and nothing changed in Chrome 7.
So the following js code became an answer for me:

/**
 * Positions the suggestions popup and starts a search
 */
Drupal.jsAC.prototype.populatePopup = function () {
  // Show popup
  if (this.popup) {
    $(this.popup).remove();
  }
  this.selected = false;
  this.popup = document.createElement('div');
  this.popup.id = 'autocomplete';
  this.popup.owner = this;
  var inputPosition = $(this.input).position();
  var inputWrapperPosition = $('div#'+$(this.input).attr('id')+'-wrapper').position();
  $(this.popup).css({
    marginTop: this.input.offsetHeight +'px',
    marginLeft: (inputPosition.left-inputWrapperPosition.left)+'px',
    width: (this.input.offsetWidth - 4) +'px',
    display: 'none'
  });
  $(this.input).before(this.popup);

  // Do search
  this.db.owner = this;
  this.db.search(this.input.value);
};

I just wrote it in my helper module js and load it in footer of page. Could be usefull for someone.

#25 patch works for Firefox 3, 3.5 and 3.6 + Chrome 7 & 8 + Internet Explorer 6 to 9 on Windows.

@petr.gorodechnyj I test it with the autocomplete from Location module, and everything looks ok. Did you test it with Garland or other theme distributed with Drupal?

@roborn: Yeah, that was with Fusion Starter.

Mmm... I test it again using Fusion Starter, and everything is working as expected.

Hi!

Will this be integrated in core ?
How to correct it from a module without patching? I can only see using a js file to change #autocomplete css property (as what the patch does). Would it be a nice way to do it?
I am the new maintainer of Search Autocomplete module and so porting it to D6 and D7. I want to correct this in the D6 version. (haven't try in D7: has the issue been corrected ?)

Thx,
Miroslav

I tried the code in #26, works for me, with a few minor adjustments.
You could add that js to this project, I reckon it would solve at least some of the positioning problems.

This worked for me (CSS: .form-item{position:relative;})
http://drupal.org/node/1218684

#25 works for me.

As mentioned in #33, there is a seperate bug report.
I solved the issue using the patch in #11 in http://drupal.org/node/1218684

D6 patch in 25 needed a re-roll.