Question

I am using jQuery’s autocomplete and I have it set up in the following way

$('#id').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: 'myurl'
            , type: 'POST'
            , dataType: 'json'
            , data: { 'query': request.term }
            , success: function (data) {
                response($.map(data, function (item) {
                    return { label: item, value: item };
                }));
            }
            });
        },
        delay: 300,
        minLength: 2,
        close: function (event, ui) { doAjaxStuffNow() },
        change: function (event, ui) { doAjaxStuffNow() }
    });

I am using both the close and the change function because of the timing I want to achieve with the ajax call. I want it to execute when the menu closes or, in the event that the menu never opens, when the field is blurred. The problem is that it fired twice if the menu closes and then the field is blurred so I was wondering if anyone knew of a way to achieve the effect of close xor change.

Thanks,
Tom

Answer 1

You can accomplish this using the focus and blur methods to determine if the value changed.

$("#combo_input_id").focus(function() {
    oldval = $(this).val();
    }).blur(function(){
        if(oldval != $(this).val()){
            doAjaxStuffNow();
        };
        return false;
    });

It isn’t very pretty, but it gets the job done. I hope future versions of jqueryui will trigger the change method even if the user never types input.