2

Here is my current jquery ui combobox. It uses remote datasource. Here is the approach to apply the same for standard combobox. But I am not sure how to apply that in my case.

Community
  • 1
  • 1
LA_
  • 19,823
  • 58
  • 172
  • 308

1 Answers1

3

Just use the change event to see if ui.item is defined:

/* snip */
change: function (event, ui) {
    if (!ui.item) { 
        this.value = 'Any City';
    }
}

Updated example: http://jsfiddle.net/FL7Nx/

Per your comment below, if you want to dynamically figure out what the default value should return to, you could assign that value to the selected option in the widget's _create method:

_create: function() {
    var self = this,
        select = this.element.hide(),
        selected = select.children(":selected"),
        value = selected.val() ? selected.text() : "",
        defaultValue = value;

Then later on in the change function:

change: function (event, ui) {
    if (!ui.item) { 
        this.value = defaultValue;
    }
}

Updated example: http://jsfiddle.net/jmdx4/

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
  • Thanks, Andrew. In reality I have several comboboxes on one page and their default values are different. How can I define always first value for each combobox? – LA_ Nov 20 '11 at 11:27
  • Or, probably I can validate the same with jQuery Validation Plugin? – LA_ Nov 20 '11 at 11:31
  • Thanks, @AndrewWhitaker. I've return back to this question and tried to implement the same in my code. Somehow `defaultValue` is always contains value of last combobox (how when `_create` is called correct values are assigned). I've tried to emulate the same in your example and it works properly - http://jsfiddle.net/jmdx4/5/. Any idea what I should check in my code? Thanks. – LA_ Jan 31 '12 at 17:59
  • @LA_: Make sure you aren't declaring `defaultValue` as a global variable, like in [this example](http://jsfiddle.net/andrewwhitaker/JYPZS/). (If you look closely, you'll see that there's a semicolon before `defaultValue` is defined). – Andrew Whitaker Jan 31 '12 at 18:08
  • I.e. looks like `defaultValue` works as local variable at jsFiddle and as global in my code. And, one more problem - if incorrect value input and then focus is lost when ajax happens (but not finished yet), then default value is not applied. – LA_ Jan 31 '12 at 18:11
  • @AndrewWhitaker, thanks a lot. It works correctly with semicolon. Still have the question with ajax. And, another problem - correct value is display, but when the form is submitted, previous value is passed (we change display text at autocomplete object, but don't update select value). – LA_ Jan 31 '12 at 18:17
  • @LA_: It's sort of hard to debug without seeing your actual code. It might be worth opening a new question. – Andrew Whitaker Jan 31 '12 at 18:22
  • @AndrewWhitaker, fixed the problem with `select` by saving `defaultId` and adding `select.html('');` to function `change`. With regards to the ajax problem - instead of geonames I use request to my own server and it is slow. Not sure how to simulate that. Somehow delay should be added. – LA_ Jan 31 '12 at 18:26
  • Ok, more or less it happens with such code - http://jsfiddle.net/jmdx4/6/ (I've added 10 sec delay) - if you start to input text and then immediately click outside of combobox, value is not replaced with Any city. – LA_ Jan 31 '12 at 18:30