HTML/JQuery editable combo

June 22nd, 2010 Categories: Uncategorized

I’ve decided to make the life of our users a bit easier, especially the part where they have to fill out the links to their social profiles. Until now, if you had two signatures, and wanted to link both to the same profiles, you had to either fill them out twice, or copy paste – not really the most enjoyable process if you have 3-4 different profiles. Remembering the editable combo Windows has, I thought it would nice that if the user had the option of either filling out a new profile link, or choose one of the previously submitted. Unfortunately, it has slipped my mind that HTML doesn’t support these editable combos.

I looked around a bit to see if someone has a nice solution, found a few, but wasn’t really happy with any of them. So here’s my “how to do it in four simple steps”.

1. Put a select tag, and an input tag, one next to the other

<select id="combo1" style="width: 200px;">
	<option>option 1</option>
	<option>option 2</option>
	<option>option 3</option>
</select>
<input id="text1" />

2. Move the input left using a negative CSS margin-left directive, to position it over the select tag

<select id="combo2" style="width: 200px;">
	<option>option 1</option>
	<option>option 2</option>
	<option>option 3</option>
</select>
<input id="text2" style="margin-left: -203px;" />

You can see that the input tag appears over the select tag. And now let’s…

3. Adjust the CSS of the input tag to fit smoothly into the select tag

<select id="combo3" style="width: 200px;">
	<option>option 1</option>
	<option>option 2</option>
	<option>option 3</option>
</select>
<input id="text3" style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;" />

4. Now let’s use JQuery to connect the functionality of both tags

<select id="combo4" style="width: 200px;" onchange="$('input#text4').val($(this).val());">
	<option>option 1</option>
	<option>option 2</option>
	<option>option 3</option>
</select>
<input id="text4" style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;" />

You may notice that the first selection doesn’t work at first. This is because in the underlying select tag the first item is already selected. To overcome this I’ve added an empty item to be selected by default. The downside is that this, not surprisingly, adds an empty line in the combo. If someone figures a nicer way to fix this – I’ll be happy to hear!

That’s it! Works nicely on Chrome and Firefox. Enjoy!

Tags: , ,

7 Responses to “HTML/JQuery editable combo”

  1. Danny
    April 10th, 2011 at 03:31
    1

    [Sorry HTML tags don't seem to get quoted]

    If you make the first item disabled (an item can be disabled and nevertheless initially selected), you could use an instruction instead of just a blank entry:

    <option disabled=”disabled”>Please select…</option>

  2. MikeAlx
    April 21st, 2011 at 18:12
    2

    Beautiful, elegant, useful – thanks!

  3. May 19th, 2011 at 20:55
    3

    Excelent!

  4. just2click
    July 7th, 2011 at 08:25
    4

    I find your solution one of the most elegant solutions I’ve seen in the past couple of days.

    There’s one problem with this solution however.
    When the user tries to work with keyboard the behavior is inconsistent.

    I’ll try beefing this one a bit and have behave like a select control when operated by Keyboard, other than that this solution is really cool!

  5. jd
    July 12th, 2011 at 12:46
    5

    Best combobox solution I’ve found after much searching. Simple and very effective!!

  6. August 27th, 2011 at 19:41
    6

    Made into an ASP.NET MVC control here: http://veadas.net/article/aspnet-mvc-combo-box

Leave a Comment

Web Hosting by HostGator