时间戳

首页 > 解决方案 > JQuery .autocomplete() 选择事件仅在小部件失去焦点时触发

javascript - JQuery .autocomplete() 选择事件仅在小部件失去焦点时触发

问题描述

我正在使用JQuery .autocomplete绑定到ASP.NET表单TextBox小部件的类。相关代码如下：

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

主题中的小部件当然是引用的那个_txtConvenzionato。代码工作正常，但select只有在失去焦点时才会触发事件处理程序_txtConvenzionato（我不知道这是否是标准行为，但对我来说听起来很奇怪）。无论如何，当在项目菜单中找到有效命中时，我需要它触发。我该如何修复/修改这个？顺便说一句，我也尝试处理change具有类似结果的事件。

标签： javascriptjquery

解决方案

我认为您的主要问题是您试图用来_txtConvenzionato.val()获取所选值。表单元素的值在事件发生后select更新。使用ui.itemfrom 事件参数来获取选定的值。

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

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

$.postJSON在请求之前执行请求$()可确保它尽快开始加载，甚至在页面的其余部分准备好之前 - 无需等待“文档准备好”来请求自动完成项目。我们使用请求.then()来转换响应（在 处拆分<br>）以供以后使用。

在内部，$()我们只对请求做出反应.done，它将接收已经拆分的项目，并尽快设置自动完成。这样，您的页面初始化代码和自动完成项可以并行加载。

推荐阅读