Feature request: Placeholders

[odie2]

Hi,

I am using single and multiple choice <select>'s in table-cells (as it's table values) and have no place for labels, as <select> imitates like it will be look finally (centered, size etc.). So I would supply user placeholder.

http://jsfiddle.net/g9tpzp7t/

With plain <select> it could be done (not perfectly, but even good), but for simple-combobox doesn't work placeholder for input (single choice) either "coping" attributes.

For single choice nice way would be join header with default text in input, which will disapper when user activate input (so like first plain <select>). For multiple choice there should be text like choice block, but without styling and hiding when any value was selected.

Output should allow to give placeholders also for plain <select>, so both users - JS and non-JS will have placeholder.

Of course init attribute should looks simple just like

$('.combobox').scombobox({
   placeholder: 'Text'
});

I am not good enought in JavaScript to try do it by editing script, so that's why I am asking for this.

Greetings

[ivkremer]

@odie2 Hi, Maciej! Thank you for detailed request. Maybe this would help you a bit, I've added the placeholder option. Check your updated fiddle: http://jsfiddle.net/ivkremer/g9tpzp7t/1/, make sure you've refreshed static files.

[odie2]

@ivkremer Hi, Almost, but not exactly.

Output should allow to give placeholders also for plain <select>, so both users - JS and non-JS will have placeholder.

I am building script that have to work as well without JS and would provide the best.

Isn't possible to edit <option value="not selected" selected></option> to fill label and remove it by JS by class name (or even better - transform it to header)?
Also maybe allow automatically detect placeholder by class name (I mean something like multiple attr enabling checkboxs mode).

So if it could working like above, I could simply write:

<select class="combobox">
    <option class="placeholder" value="" disabled="disabled" selected="selected">Choose color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>
<script>$('.combobox').scombobox();</script>

And script will parse it (by placeholder class) like:

<select class="combobox">
     <option value="not selected scombobox-separator scombobox-header" selected>Choose color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>
<script>$('.combobox').scombobox({
    placeholder: 'Choose color'
});</script>

To get result like:

[odie2]

I changed my concept for accesibility and as I have no place for label here I did optgroup and label readable only for screenreaders. As optgroup could be ignored in very old browsers and title tag is bad thing, I think in this case table concept (eventually with responsive headers) will be enought.

However I found that script is destroying optgroup to empty option in plain select:

http://jsfiddle.net/g9tpzp7t/4/

It shouldn't be, because if someone would use "destroy" method to back to plain select.

[odie2]

Latest placeholder parameter is nice, however I miss two things for it:

1. I had to add class in PHP if any element is selected - I would add placeholder easy to each placeholder-teacher and it should be empty be default. I can't empty every select, because then I will empty selects with selected value, so that's has-selected from PHP:

if ( $( this ).hasClass( 'placeholder-teacher' ) && ! $( this ).hasClass( 'has-selected' ) ) $( this ).scombobox({ 'placeholder' : 'Wybierz nauczyciela', 'empty' : true });
else $( this ).scombobox();

I can do it on variables, but I think that if placeholder were provided, then it should be empty by default. Or maybe additional paramater?

1. It would be nice to have placeholder imitation for checkbox mode. It also may be useful.