Experiments in marking up a combobox

combobox.md

Intro

We have a jQuery-UI widget that turns a rendered <select> into a new autocompleting <input> that uses the <select>'s <option>s as its backing data. The <select> remains on the page, but is hidden from view, and it's value is kept in sync with that of the autocomplete. Now I'd like to make the autocomplete a combobox, complete with down-arrow. Some ideas:

<input> with a <span> positioned on top of it:

<input class='combobox' /><span class='combobox-button'>▼</span>

.combobox { border: 1px solid; }
.combobox-button { position: ???; top: ???; left: ???; }

<input> with a <span> next to it, sharing a border:

<input class='combobox' /><span class='combobox-button'>▼</span>

.combobox, .combobox-button { border: 1px solid; }
.combobox { border-right: none; }
.combobox-button { border-left: none; }

<input> with a <button> next to it, sharing a border:

<input class='combobox' /><button class='combobox-button'>▼</button>

/* same CSS as previous */

<input> with an <input type="button"> next to it, sharing a border:

<input class='combobox' /><input type="button" class='combobox-button' value="▼" />

/* same CSS as previous */

I think I like the <input> with an <input type="button"> next to it, sharing a border best.

The big question when thinking about semantic markup is: What would the page look like when there is no style (or javascript) applied?

On an old mobile-phone, or a screen-reader, or whatever. What should this thing degrade down into? If you take away the "magic" of the combo box, what is left?

Just an <input type="text">?

A select box?

I'd start there, then add elements and "magic" accordingly. If it degrades down into a text input, then I'd start there. Add a button, and a div (or <ul>) below to hold options, dynamically with javascript.

Ah, fair point, though only partially applicable here. The combobox is a custom jQuery-UI widget. The pure-HTML behavior is a basic <select> tag. The <input>, the <ul>, and the <button> (or alternative) are all generated via Javascript.

As a point of reference, Ext.js does an <input> and an <img>, though theirs has a border between the two, which our wireframes don't.

The pure-HTML behavior is a basic <select> tag.

I would start with a <select> in the markup then.

The <input>, the <ul>, and the <button> (or alternative) are all generated via Javascript.

Sounds good

I think I like the <input> with an <input type="button"> next to it, sharing a border best.

No opposition here

@jamesarosen
Hey I am stuck with all these things ,hope to have a help from you, I have a a script for auto-complete input text box,,now I want to have a link on the right most side of the input box,,that will show up all the options,,,,,please help ,,,https://github.com/RUPOJS/jsCombo Your help will mean a lot to me..