Ajax Select Boxes

[amykhar]

I'm not sure what control or interface will best do what I'm looking for and I'm hoping somebody can point me in the right direction.

The problem: I have a database of a huge number of things. I need the user to be able to select from these specific things. But, there are too many to put in a dropdown.

Initially, I was using something like vbulletin does with the name suggest for pms. If you type in the first 3 letters of what you are looking for, a menu popped up from the database with all the options that contained that snippet. The more you typed, the more refined the options became.

BUT, this created a problem because the popup menus obliterate select boxes beneath it in Internet Explorer. Because the stupid form I have to work with is huge, there is no real way to arrange the form so that no ajax field is above a select box.

Ideally, I could put an empty select box on the page. If the user started typing the first 3 letters, the select box would fill with the appropriate options. The problem is that select boxes don't let you type 3 characters. Each character you type sends you to the options that start with that letter.

I thought putting in a textbox and having it change to the selectbox when the options filled would work, but upon reflection it won't because we lose the ability to refine the search and we can't go back and search again if we mess up the first time.

I also considered a text box to type the query in and then fill an adjacent select box with the results of the query, but the form already has too many controls.

Redesigning the form to have less stuff on it is not an option. The client wants all the stuff on one screen. Argh.

So, to summarize, what I need is an intuitive way for the user to create a mechanism to select from a huge list of stuff in the database and enter the selection into a form. Any ideas or links to things you think might work?

Amy

[calorie]

What about a pop-up? You'd have a text field with a choose option link next to it. The user would click the link, choose an option from the pop-up, and then the pop-up would auto-close and auto-fill the text field.

[tgreer]

What you want is the missing "combobox" element. HTML doesn't have one. One of the most popular articles on my site (http://www.tgreer.com/comboArticle.html) experiments with creating one. It works great in FireFox, but IE's z-index bug cannot be avoided.

Thank you for posting this publically - a refreshing change.

I think a CSS-based "popup" DIV, populated with AJAX as a result of typing into a textbox, might be your only choice.

[amykhar]

and it's the divs that wipe out the select boxes underneath. very frustrating. the code you posted is exactly what I'm looking for, but the darn clients use IE.

[amykhar]

It seems you pointed me to the search term I needed. I'm going to play with this, that seems to work in IE

http://shaunwagner.com/projects/js/comboBox.html

[tgreer]

It's close... though it has really bad functionality due to focus/blur issues and the keypress handler. It's hard to click again, start over, get focus back to type again. That's why my approach uses a textbox. Note, that the z-index/select element error in IE should be fixed in IE7.

In FF, you stack them, as I've done. In IE, you simply have to find a way to visually marry the two controls. A FieldSet might be nice for this.

How do the DIVs "wipe out" the select boxes? I'm trying and failing to visualize that.

[amykhar]

If I have a form that has a ajax popup div in a table row above a row that has a select box, and I use ajax to bring up the menu and select something, the div renders the selectbox invisible in IE. The only way to get it back is to refresh. I can't show you this in action because it's on an intranet.

It doesn't wipe out textboxes, checkboxes or many other controls. But select boxes disappear.

Some research when I first encountered the problem indicated that the only known workaround was to rearrange the form so that this didn't happen. But, I no loner have that option.

[tgreer]

Sounds like a form of the same error. Though it's horribly old-fashioned and won't work with popup blockers, instead of a DIV, could you use a Window.Open()?

Or, if IE is the problem, you can use browser detection code, and use an IE-only "dialog". (http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_window.asp)

[amykhar]

I may end up going to window.open as suggested. I am posting some screenshots so you don't think I'm nuts.

The first one is the screen. See the physicians with contacts underneath? Watch what happens to 'Type' after the menu is used.

[tgreer]

Yes, that's the well known IE bug with z-index and select elements. It's been around for years, and I've been dealing with it in one fashion or another for years. A colleague and I worked out a solution using IFRAMEs, but the memory is fuzzy. A web search on "IE select z-index" should give you enough information on the issue to choke a horse.

The select boxes don't "disappear"... in fact, they are always on top; they show up on top of the DIV. They do so even if you give the DIV a z-index of 999 and the select a z-index of -999. It's a bug in IE.

Of course I think you're nuts, amy - but I sense a ban hovering over my head if I continue. :)

Edit: Not a ban from you... but from Mr. "You've Been Warned" (https://vborg.vbsupport.ru/member.php?u=59998), if I expounded on why I think you're nuts.

[amykhar]

I have never banned anybody from vbulletin.org. I doubt you'd be my first choice. But that is off topic and I know you don't like off topic posts; so I'll shut up now :D

ok. off to figure out what I want to do to work around this.

[noppid]

Of course I think you're nuts, amy - but I sense a ban hovering over my head if I continue. :)

They won't let me admin here, you're safe.

Actually, this is a great thread. I'm sorry for busting on Amy.

[Princeton]

place the "select" in a layer and hide the layer when you display the menu

[tgreer]

A "layer" is a deprecated Netscape-only element that will be cause validation errors with most DOCTYPES. The DOM version of a "layer" is a DIV, and DIVs are not exempt from the "IE select z-index" error.

The principle is sound, though, and that's why I think I ended up with putting my selects in an IFRAME for one particular project. Looking at amy's screenshots, I don't think that will work in her case, though.

[Princeton]

that's what I meant ... yes, it does work

we are merely changing the display to "none"

[tgreer]

Ah. In that case, you probably wouldn't even need the DIV, you could toggle the CSS "display" on the TD element holding the SELECT. In fact, you could probably toggle it on the SELECT itself.

There could be rendering problems with "display: none". I'd suggest instead, toggling "visible: hidden/visible".

[Princeton]

correct :D

I suggest testing on the platform that will be used (intranet).

[amykhar]

The iframe trick seemed to work, (thank you) but I'm willing to try toggling the visible and invisible property too because that would probably be easier with all the stupid form elements I have to deal with.

Of course, when I pass this off to the stylist, I'm going to have to explain why that has to stay there, but that shouldn't be too difficult.