Question

I am trying to implement a functionality where a user can select a list of items from the dropdown suggestions and save new items using a dialog box if and only if there are no suggestions. I am currently implementing it as follows,

suggestOpened = false;//Initially set flag to false
....
open: function(evt, ui) {
  suggestOpen = true; //Set the flag to true when the list is opened
}
change: function(event, ui) {
  if(!suggestOpened) {
    //open dialog box
  }
  suggestOpened = false; //List will be closed here so reset flag
}

The problem with this is that if the user returns to the field in the same session and wants to save another item, the flag will be set to false so the dialog will not be opened. Can I somehow have access to the response from the ajax request and find out if the response contained suggestions from the source?

Thanks,
Roland

Answer 1

You’re pretty close– the change event can actually handle this:

$("#auto").autocomplete({
    source: ['hi', 'bye', 'foo', 'bar'],
    change: function (event, ui) {
        var newItem = !ui.item;

        if (newItem) {
            /* open your dialog */
            $("#dialog").dialog("open");
        }
    }
});

Example: http://jsfiddle.net/8RmRY/

The only caveat here is that if the user types something that exists in the list but does not physically select an item, newItem will be true. If that’s a problem, I can expand my answer.