Custom select list

[Buffalo101]

Hello,

I need to customize my select control to allow the user to enter something manually. Let's say I have this:

<select>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
 </select>

I want to have another item in the select (first one), which, if selected, will allow the user to type in something himself.

I'm pretty sure I saw this somewhere. Is this possible?

[zobadof]

Have you got this implemented on a website?

[Buffalo101]

I'm just putting together some pages for a project. Anyway, I have found something:

http://javascript.about.com/library/blnav7.htm

Functionally, it's what I was searching for, but it looks ugly. I'm pretty sure I saw a genuine looking select control with a blank option that you could type into.

[zobadof]

If it looks ugly, why don't you just customize the code? Also if you've solved this please make sure you select Solved so others know that you've managed to solve it!

[zobadof]

Or add some CSS

[Buffalo101]

As it turns out, this control fails to work correctly if more than one controls are on a page. Still looking for advice.

[zobadof]

Could explain what you're intending to do better, then I might be able to help you easier. As I'm unsure of what you're trying to get at.

Thanks

[Buffalo101]

I am trying to obtain the same thing as here: http://javascript.about.com/library/blnav7.htm, but without having two controls (input + dropdown list).

[teedoff]

I am trying to obtain the same thing as here: http://javascript.about.com/library/blnav7.htm, but without having two controls (input + dropdown list).

Did you read this article? It plainly states you cant combine two controls into one. And to create the combo box, you need that bit of javascript to catch the user's keystrokes to match the values in the select list.

Again, I personally know of no way to combine a textbox and select list into one control.

[Buffalo101]

Yes, I read the article, but one person stating something doesn't make it irrefutable.

I will keep looking for alternatives and give an update. It would be probably simpler and neater looking to use various other controls for achieving what I want (radio button: predefined values or a new one).

[teedoff]

Maybe something like this?

Still uses jQuery, and I thought I had read you didnt want to use js, which is the reason for my above comment.

[Philippe.Lahaie]

quickly what comes to my mind as a simple work arround would be an "other" option in your select that triggers some javascript when selected/deselected to show/hide a textbox on the side.

[Philippe.Lahaie]

http://chakrabarty.com/pp_editable_dropdown.html#3

http://www.ridgway.co.za/archive/2005/10/15/aneditablehtmlselectlist.aspx

looks like the 2 sites above did exactly what you want, except the first one didnt work for me in chrome, and the econd i didnt test.

this one is exactly what you want, works , and is extremly easy to make :

http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html <- came directly from google