HTML/JQuery editable combo

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

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

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

1 <select id="combo2" style="width: 200px;">
2     <option>option 1</option>
3     <option>option 2</option>
4     <option>option 3</option>
5 </select>
6 <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

1 <select id="combo3" style="width: 200px;">
2     <option>option 1</option>
3     <option>option 2</option>
4     <option>option 3</option>
5 </select>
6 <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

1 <select id="combo4" style="width: 200px;" onchange="$('input#text4').val($(this).val());">
2     <option>option 1</option>
3     <option>option 2</option>
4     <option>option 3</option>
5 </select>
6 <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!

╠► Referenced Link

Advertisements
By Rz Rasel Posted in jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s