Default to blank

[RyanPaddyFronde]

The combobox defaults to the first item in the list. Is it possible to make it default to a blank value instead?

[ivkremer]

Hi!
This question requires consideration. The problem is the default value of a select is its first value: http://jsfiddle.net/ivkremer/2LDJb/1/.
I can add an parameter to enable this functionality like the shown in a fiddle above.

[RyanPaddyFronde]

Thanks mate. I've just tried setting the underlying select like in that fiddle, but it doesn't affect the Simple Combobox.

I realise a new parameter might be some time away, so in the meantime is there any chance you do a fiddle showing how to set a Simple Combobox to blank like that? I've found that .scombobox('val',''); works just after creating the combo, but once the user has selected an option it no longer works.

[ivkremer]

http://jsfiddle.net/ivkremer/ZM3dY/ .scombobox('val', null) works for me in this fiddle. Empty string, false, or any invalid key also do the job even after changing the value.

BTW I found another very stupid bug. After typing a valid value in combobox and losing its focus by clicking the body, the combo's value doesn't change.

[ivkremer]

@RyanPaddyFronde I think I should close it, am I right?

[RyanPaddyFronde]

Thanks, using .scombobox('val', null) works for me to clear the initial value of the combo on page load.

The other half of the problem is that I'm using the combo to select a value to be input into another control, and then I want the clear the combo. I've tried doing this in the onchange() of the tag, but it doesn't work. I imagine this is an HTML/browser restriction to stop recursion of the onChange, but it would be good to find a way around it.

[ivkremer]

@RyanPaddyFronde If you can show it with a fiddle that would be very appreciated.
As I got you the main thing you would like to do is to listen for change event? This can be done by .scombobox('change', function() {}) listener, like this: http://jsfiddle.net/ivkremer/bEcG9/

[cmeza]

I'm having issues with this as well. I don't want it to default to any values until typed in. I have a blank option in my list, but it's lost when converted to a combobox. None of the fiddles above work, all are 404 (except the last one).

[ivkremer]

@cmeza can you provide a snippet about a blank option?
http://jsfiddle.net/ivkremer/crU95/2/ this is how you can get an empty value by default, does it work?

[cmeza]

It begs the question why would you have to programatically add an empty option if one already exists? It looses the existing one when converting to a scombobox.

That doesn't produce an empty option when it's instantiated?

[ivkremer]

@cmeza do you mean <option></option> by an existing empty option?
I think the problem is that you always need to do .scombobox('val', null) to empty it and that there is no option to make a combo empty by default when it is instantiated, am I right?

[TwoRedCells]

<option></option> 

doesn't work, but

 <option>&nbsp;</option> 

does

[cmeza]

Sorry, been busy last few days.

<select>
    <option></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Yes, @ivkremer that's basically what I mean. That 1st option doesn't even make it to rendered scombobox version. It just seems like it's time to add a feature to NOT have the list start with the first option or allow blanks defined in the data to be displayed.

Either an option to show the combobox empty or allow blanks. So it more functions like an input/autocomplete, but I need the value of a selected option! That's why I liked scombobox vs autocomplete.

[ivkremer]

@cmeza @RyanPaddyFronde now there is an empty option which tells the combo to be blank when instantiated. It's false by default.
Also selected property can be used in the data array items to tell the combo that the corresponding options will be marked as selected (.prop('selected', true)), like this:

$('#my-combobox').scombobox({
    data: [{
        value: '001', text: 'The first'
    }, {
        // the combo will have '002' as its value and display 'The second'
        value: '002', text: 'The second', selected: true
    }, {
        value: '003', text: 'The third'
    }]//, // uncomment this and the combo will be empty anyway:
    //empty: true
});

I'm going to close this issue if everything is ok now, thanks for reporting.

[RyanPaddyFronde]

I've tried the new empty option and it answers my original request, thanks.

Using .scombobox('val', null) works to clear the combo after it's been created.

Setting val to null doesn't work in the list's onChange event (i.e. to clear it after it is used to select an item), but this is a standard HTML select limitation that can be worked around with a timeout, like this:

setTimeout(function(){combo.scombobox('val', null);}, 1);

So, all sorted for me.

[cmeza]

I'll get the latest & let you know.

[ivkremer]

@RyanPaddyFronde But now, as I understand there is no need to execute .scombobox('val', null) after combobox instantiation if you're using empty: true in options, isn't it?

[RyanPaddyFronde]

There is a need, due to my use case:

1. The combobox is instantiated blank.
2. User selects an item from the combobox.
3. The selected item is used to perform an action (the item is added to another list).
4. The combobox is set to blank again, ready for the next item to be selected.

[mmustala]

This is a problem for me too. My select has options:

<select name="user_id" id="user_id" class="use_combobox">
  <option value="">Find employee</option> 
  <option value="7">Jack</option>
  <option value="16">Dennis</option>
</select>

And I initialize the scombobox with:

$('.use_combobox').scombobox({
  highlight: false
  empty: true
})

After initialization the blank option gets removed from the original select. No option is marked as selected and the scombobox input has no value. But If I post the form the value of the first option gets sent to the server. Which is not what I would expect to happen as user has not selected any values.

[mmustala]

Found the reason why the empty option is removed. There is a method purifyOptions that is called if removeDuplicates: true, which is the default. When I initialize the scombobox with removeDuplicates: false the empty option is kept and select works as expected.

Update:
After changing the first option to <option value=""></option> and removing the empty: true from the scombobox init also the default and selected values are respected.