JQuery .autocomplete() select event only triggers when widget loses focus

问题

I'm using a JQuery .autocomplete class bound to an ASP.NET form TextBox widget. The relevant code is the following:

var _hdnConvenzionato = null;
var _txtConvenzionato = null;

$(function () {
    _hdnConvenzionato = $("input[id$='_hdnConvenzionato']");
    _txtConvenzionato = $("input[id$='_txtConvenzionato']");

    $.ajax({
        type: "POST",
        url: "/Service/WSDataService.asmx/GetConvenzionati",
        dataType: "json",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            var datafromServer = data.d.split("<br />");

            _txtConvenzionato.autocomplete({`enter code here`
                source: datafromServer,
                select: function (event, ui) {
                    var _data = _txtConvenzionato.val();
                    var _value = null;

                    // calculate _value
    
                    _hdnConvenzionato.val(_value);

                    _hdnConvenzionato.closest("form").submit();
                }
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
});

The widget in subject is of course the one referenced _txtConvenzionato. The code works fine but the select event handler is triggered only when _txtConvenzionato lose its focus (I don't know if this's the standard behaviour but it sound strange to me). Anyway I need it to trigger when a valid hit is found in the items menu. How can I fix/modify this? BTW I tried also handling change event with similar results.

回答1:

I think your main issue is that you're trying to use _txtConvenzionato.val() to get the selected value. The form element's value is updated after the select event. Use the ui.item from the event arguments to obtain the selected value.

A better approach (with a few more improvements):

// general-use "Ajax JSON POST" function, likely to be helpful in other places, too
$.postJSON = function (url, data, success) {
    return $.ajax({
        type: "POST",
        url: url,
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        success: success || null
    });
};

var Convenzionati = $.postJSON("/Service/WSDataService.asmx/GetConvenzionati", {})
    .then(function (data) {
        return data.d.split("<br />");
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    });

$(function () {
    Convenzionati.done(function (items) {
        $("input[id$='_txtConvenzionato']").autocomplete({
            source: items,
            select: function (event, ui) {
                var _data = ui.item, _value;

                // calculate _value ...
                $("input[id$='_hdnConvenzionato']")
                    .val(_value)
                    .closest("form").submit();
            }
        });
    });
});

Doing the $.postJSON request before the $() ensures that it starts loading as soon as possible, even before the rest of the page is ready - there is no need to wait for "document ready" to request the autocomplete items. We use the request's .then() to transform the response (split at <br>) for later use.

Inside the $() we only react to the request's .done, which will receive the already splitted items, and set up the autocomplete as soon as that's possible. This way your page initializing code and the autocomplete items can load in parallel.

来源：https://stackoverflow.com/questions/65412540/jquery-autocomplete-select-event-only-triggers-when-widget-loses-focus

标签

javascript

jquery