Автозаполнение пользовательского интерфейса jQuery: завершить то, что я набрал после размытия, но до завершения запроса ajax?

Я предполагаю, что у вас настроено автозаполнение с параметром autoFocus, установленным на true. Имея это в виду, вы могли бы сделать что-то вроде этого:

/* Keep track of whether or not we're in an AJAX request*/
var loading = false;

$("input").autocomplete({
    source: function(request, response) {
        /* Beginning of an AJAX request; set loading to true */
        loading = true;

        $.ajax({
            /* (snip) Options for your AJAX request. */
            success: function(data) {
                /* Loading complete. */
                loading = false;
                response(data);
            }
        });
    },
    autoFocus: true,
    select: function () {
        /* prevent the user from selecting an item if we're still loading matches */
        return !loading;
    }
}).bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB) {
        /* Don't let the user tab out if we're still loading matches: */
        return !loading;
    }
});

Следите за тем, выполняется ли вызов AJAX. Если это так, не позволяйте пользователю выбирать вариант из раскрывающегося списка, пока этот запрос не будет выполнен и не появятся самые последние совпадения.

Единственная часть вашего вопроса, которая может не удовлетворить, - это последняя часть (и я могу неправильно понять, о чем вы здесь просите):

[...] и затем, когда это происходит, выбирает первый вариант.

Вероятно, это возможно, но с точки зрения удобства использования мне кажется более разумным запретить выбор элемента до тех пор, пока не появятся самые свежие элементы.

В конце концов, только потому, что есть один результат для виджета автозаполнения, не означает, что пользователь захочет выбрать его, когда он, наконец, появится.

Наверное, проще увидеть на примере: http://jsfiddle.net/RsSTa/. Попробуйте ввести «J», а затем «JQ». Вы не сможете продолжить работу с элементами из устаревшего вызова AJAX.

Изменить 4

Сделал это функцией.

(function($){
    $.fn.ajaxselect = function(options) {
        var settings = {
            delay: 300,
            data: function(term) {
                return {term:term};
            },
            url: '',
            select: function(item) {},
            html: true,
            minLength: 0,
            autoSelect: true
        };
        if(options) {
            $.extend(settings, options);
        }
        $(this).autocomplete({
            source: function(request, response) {
                var data = settings.data.call(this.element[0], request.term);
                $.ajax({
                    url: settings.url,
                    dataType: 'json',
                    data: data,
                    success: function(data, textStatus, $xhr) {
                        response(data);
                    },
                    error: function($xhr, textStatus) {
                        response([]);
                    }
                });
            },
            focus: function(event, ui) {
                return false;
            },
            search: function(event, ui) {
                $(this).data('lastSearch', this.value);
            },
            select: function(event, ui) {
                if($(this).val() === $(this).data('lastSearch')) {
                    if(settings.select.call(this, ui.item) !== false) {
                        $(this).val(ui.item.value);
                    }
                    $(this).data('selectedValue',$(this).val()).trigger('change');
                } 
                return false;
            },
            minLength: settings.minLength,
            autoFocus: settings.autoSelect,
            delay: settings.delay,
            html: settings.html
        }).bind('change.ajaxselect', function() {
            $(this).toggleClass('selected', $(this).val() === $(this).data('selectedValue'));
        });

        if(settings.autoSelect) {
            $(this).bind('autocompletechange', function(event, ui) {
                if($(this).val() !== $(this).data('selectedValue') && this.value.length > 0) {
                    var self = this;
                    var data = $.extend({autoSelect:1},settings.data.call(this, this.value));
                    $(this).addClass('.ui-autocomplete-loading');
                    $.ajax({
                        url: settings.url,
                        dataType: 'json',
                        data: data,
                        success: function(data, textStatus, $xhr) {
                            if(data.length >= 1) {
                                var item = $.ui.autocomplete.prototype._normalize(data)[0];
                                if(settings.select.call(self, item) !== false) {
                                    $(self).val(item.value);
                                }
                                $(self).data('selectedValue',$(self).val()).trigger('change');
                            }
                        },
                        complete: function($xhr, textStatus) {
                            $(self).removeClass('.ui-autocomplete-loading');
                        }
                    });
                }
            });
        }

        if(!settings.minLength) {
            $(this).bind('focus.ajaxselect', function() {
                if(!$(this).autocomplete('widget').is(':visible')) {
                    $(this).autocomplete('search','');
                }
            });
        }

        return $(this);
    };
})(jQuery);

Применение:

$('#yourselector').ajaxselect({
    url: '/ajax/city'
});

Сейчас работает довольно хорошо.