Question

我使用的是jquery ui自动完成功能。当用户键入自己的值，而不是从列表中选择项目时，文本框将清除。这是可以的（我不希望用户能够输入他们自己的值），除非用户键入列表中存在的值。

我尝试使用this帖子中详细介绍的autoSelect插件，但它不起作用 - 我添加了插件但是当我在列表中输入一个值并点击标签时，我得到相同的结果和以前一样 - 文本框清除。

这是我的自动填充功能：

$(function () {
$('[id$="txtDocType').autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "/MyPage.aspx/myFunction",
            data: "{'prefixText':'" + request.term.toLowerCase() + "', 'ddvId':'" + this.element.data('autocomplete') + "'}",
            dataType: "json",
            success: function (data) {
                response(data.d);
            },
            error: function (result) { }
        });
    },
    minlength: 1,
    select: function (event, ui) {
        $('#divOtherFields input[type=text], input[type=password]').prop("disabled", false).removeClass("disabled");
        $('[id$="btnSaveNext"],[id$="btnSaveClose"]').prop("disabled", false);
        $('[id$="txtReceiptDate"]').datepicker("setDate", new Date());
    }
});
});

这是插件：

(function( $ ) {
    $.ui.autocomplete.prototype.options.autoSelect = true;
    $( ".ui-autocomplete-input" ).on( "blur", function( event ) {
    var autocomplete = $( this ).data( "autocomplete" );
    if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }
    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" );
    autocomplete.widget().children( ".ui-menu-item" ).each(function() {
        var item = $( this ).data( "item.autocomplete" );
        if ( matcher.test( item.label || item.value || item ) ) {
            autocomplete.selectedItem = item;
            return false;
        }
    });
    if ( autocomplete.selectedItem ) {
        autocomplete._trigger( "select", event, { item: autocomplete.selectedItem } );
    }
    });
    }( jQuery ));

我在这一行的插件中设置了一个断点 - ＆＃34; $（＆＃34; .ui-autocomplete-input＆＃34;）。on（＆＃34; blur＆＃34;，function（event）＆＃34;并且断点被击中，但代码不会单步执行。当我为此行设置断点时 - ＆＃34; var autocomplete = $（this）.data（＆＃34; autocomplete＆＃34;） ;＆＃34;断点未被击中。

有什么想法吗？我对此很满意。

Answer 1

我通过对autoSelect插件进行一些调整来解决这个问题。这是最终为我工作的代码：

$(".ui-autocomplete-input").bind("focusout", function (event) {
    var autocomplete = $(this).data("ui-autocomplete");
    if (!autocomplete.options.autoSelect || autocomplete.selectedItem) { return; }

    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
    autocomplete.widget().children(".ui-menu-item").each(function () {
        var item = $(this).data("ui-autocomplete-item");
        if (matcher.test(item.label || item.value || item)) {
            autocomplete.selectedItem = item;
            return false;
        }
    });
    if (autocomplete.selectedItem) {
        autocomplete._trigger("select", event, { item: autocomplete.selectedItem });
    }
});

Answer 2

我使用焦点事件将第一个值设置为隐藏变量。在select事件中也更新了相同的隐藏变量。然后这是我发布到ajax调用的隐藏变量。

为什么我没有使用焦点来设置自动完成输入框中的值，这是因为即使在我输入此框时也这样填充了自动完成输入框。

^^^^ property `query`. Property not found in http$ClientRequest

jquery ui autocomplete with autoselect plugin

2 个答案: