I have successfully implemented an autocomplete list for an item on a form I'm working on. However when the suggestion list is returned, there is a drop down list directly behind the list, and it's showing up on top of my suggestion list. This makes it very difficult to see/select items in the suggestion list.

Anyone have any ideas on how to prevent this from happening? Obviously I want my suggestion list to be on top of any controls that are underneath it. I've been reading about resetting the Z Index of one of my control but I have been unable to do so thus far. Thanks for any ideas

12/18/2008 10:18:39 AM

give the input tag an attribute of autocomplete="off"

it doesn't validate but it works

if you want it to validate, set the attribute with javascript on body onload

[Edited on December 18, 2008 at 10:21 AM. Reason : this is an html/css question btw]

12/18/2008 10:21:18 AM

Quote :

"this is an html/css question btw"

yeah thought about that right after i posted it

and i've tried the autocomplete attribute, but that doesn't fix it, the dropdown list still shows up on top of my suggestions (assuming i'm doing it right by adding that attribute to the textbox.).

12/18/2008 10:23:41 AM

screenshot?

12/18/2008 10:38:00 AM

12/18/2008 10:53:30 AM

Quote :

"I've been reading about resetting the Z Index of one of my control but I have been unable to do so thus far."

what do you mean unable to do this? z-index is what you need to be looking at

12/18/2008 11:42:08 AM

What browser is this happening in? I am assuming IE6 because if you have your CSS setup correctly it will be the only browser with this issue. The easiest and only fix I'm aware of is when your auto complete list is generated and visible on the page, the drop down elements on the page are temporarily hidden.


and as far as setting up your z-index's be sure that all your elements are in the same parent level and have the same positioning (i.e. relative/absolute etc) or it won't work in IE.

[Edited on December 18, 2008 at 11:52 AM. Reason : .]

12/18/2008 11:50:47 AM

Quote :

"What browser is this happening in? I am assuming IE6 because if you have your CSS setup correctly it will be the only browser with this issue. The easiest and only fix I'm aware of is when your auto complete list is generated and visible on the page, the drop down elements on the page are temporarily hidden."

right on, it's IE6. I thought about hiding the list, but if the user generates the autocomplete list then clicks away from it I think it would miss the unhide and the list would stay hidden (assuming I place the unhide in the selected event for the autocomplete control)

12/18/2008 12:01:03 PM

Moving the select box is the only foolproof way to do it.

Like Golovko mentioned, IE6 doesn't properly pass z-indexes when things have different positioning attributes and since your normal HTML code is placed either relative or statically and your autocomplete is probably absolute, you're going to have problems.

I mean, alternatively, you could do what others are suggestings and hide the select box while someone is using the autocomplete, then use JavaScript to detect heights and when the autocomplete returns fewer results than the height necessary to overlap the dropdown. That, combined with onfocus and onblur might get you somewhere.

12/18/2008 12:46:43 PM

^^as stein mentioned with onblur. If you set an onblur to call whatever javascript function you have to toggle the visibility/display of the dropdown then if the user clicks any where else on the page it will call that function.

12/18/2008 1:22:03 PM

just detect when they are using IE6 then throw them to an upgrade page

12/18/2008 1:25:40 PM

i wish

12/18/2008 2:00:08 PM

supporting IE6 is fairly simple if you've got the experience and know what you're doing. You eventually learn as you're developing what needs to be done in order for it to work in IE6 and you can plan ahead.

12/18/2008 2:04:55 PM

Quote :

"just detect when they are using IE6 then throw them to an upgrade page"

12/18/2008 7:09:57 PM

Quote :

"i wish"

12/19/2008 12:28:20 AM

Quote :

"supporting IE6 is fairly simple if you've got the experience and know what you're doing. You eventually learn as you're developing what needs to be done in order for it to work in IE6 and you can plan ahead."

12/19/2008 12:29:56 AM

Quote :

"what do you mean unable to do this? z-index is what you need to be looking at"

well i put a onclientshowing="setzindex"

and the jacascript is:

        function setzindex(source, args) {
            source._popupBehavior._element.style.zIndex = 100000;
            return;
            
        }

12/22/2008 11:17:33 AM

Quote :

"just detect when they are using IE6 then throw them to an upgrade page"

No! Don't be a lazy developer!

12/22/2008 11:41:39 AM

i hope you develop for 5.5 then

12/22/2008 1:40:17 PM

use higher level libraries that take care of this

12/22/2008 2:27:23 PM