Javascript autocomplete（）选择事件仅在小部件失去焦点时触发

我正在使用一个绑定到

ASP.NET

form

TextBox

小部件的

JQuery

.autocomplete类。 相关代码如下所示：

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);
        }
    });
});

var\u hdnconconvenzionato=null；
Varu TXT=null；
$（函数（）{
_hdnConvenzionato=$（“输入[id$=”\u hdnConvenzionato']）；
_txtConvenzionato=$（“输入[id$=”\u txtConvenzionato']）；
$.ajax({
类型：“POST”，
url:“/Service/WSDataService.asmx/getConventionionati”，
数据类型：“json”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
成功：功能（数据）{
var datafromServer=data.d.split（
）；
_自动完成（{`在此处输入代码`
来源：datafromServer，
选择：功能（事件、用户界面）{
var _data=_txtcontonvenzionato.val（）；
var _值=null；
//计算_值
_hdnConvenzionato.val（_值）；
_hdnConvenzionato.closest（“表单”）.submit（）；
}
});
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
警报（文本状态）；
}
});
});

主题中的小部件当然是引用的小部件。 代码工作正常，但只有当

\u txtcontonnezionato

失去焦点时才会触发

选择

事件处理程序（我不知道这是否是标准行为，但听起来很奇怪）。 无论如何，我需要它触发时，一个有效的点击是在项目菜单中找到。 如何修复/修改此问题？

---

顺便说一句，我也尝试过处理类似结果的

change

事件。

我认为您的主要问题是，您试图使用

\u txtConvenzionato.val（）

来获取所选值。表单元素的值在

select

事件之后更新。使用事件参数中的

ui.item

获取所选值

更好的方法（还有一些改进）：

//一般使用“Ajax-JSON-POST”函数，在其他地方可能也有帮助
$.postJSON=函数（url、数据、成功）{
返回$.ajax({
类型：“POST”，
url:url，
数据：JSON.stringify（数据），
contentType:“应用程序/json；字符集=utf-8”，
成功：成功| |空
});
};
var conventzionati=$.postJSON（“/Service/WSDataService.asmx/getconventzionati”，{}）
.then（功能（数据）{
返回数据.d.split（
）；
})
.fail（函数（XMLHttpRequest、textStatus、errorshown）{
警报（文本状态）；
});
$（函数（）{
会议结束（功能（项目）{
$（“输入[id$=”\u txtconventionionato']）。自动完成({
资料来源：项目，
选择：功能（事件、用户界面）{
var _data=ui.item，_值；
//计算_值。。。
$（“输入[id$=”\u hdnConvenzionato']））
.val（_值）
.最近的（“表格”）。提交（）；
}
});
});
});

在

$（）

之前执行

$.postJSON

请求可以确保它尽快开始加载，甚至在页面的其余部分准备就绪之前——无需等待“document ready”请求自动完成项。我们使用请求的

.then（）

来转换响应（在

处拆分），以供以后使用

---

在

$（）

中，我们只对请求的

.done

做出反应，该请求将接收已拆分的项目，并尽快设置自动完成。这样，页面初始化代码和自动完成项可以并行加载。

这是打字错误吗<代码>ui.item，\u值变量_数据=ui.item，_值第一个被声明并初始化，第二个只被声明（在您给它一个值之前，它将是

未定义的

，但它将被正确地定义为函数本地）。确定。。您的提示显然是正确的，表单现在正在运行。唯一的问题是，

\u txtConvenzionato

不再填充所选数据，它只显示我输入的字符串部分。。是否应选择事件处理程序return

true

？更准确地说，部分值在表单重新加载后被设置为

\u txtConvenzionato

。忘记

true

返回值…@weirdgyn啊，我明白为什么会这样。让我猜猜，a）

/Service/WSDataService.asmx/getConventionionATI

需要一点时间来响应，b）它不支持服务器端筛选，c）值列表不会动态更改，但只需要在页面加载时加载一次，对吗？如果是，我会更新我的答案。

// 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();
            }
        });
    });
});