1

我正在使用 jquery ui 自动完成功能。当用户键入他们自己的值，而不是从列表中选择一个项目时，文本框会被清除。这没关系（我不希望用户能够输入他们自己的值），除非用户输入的值确实存在于列表中。

我尝试使用本文中详述的 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 ));

我在这一行的插件中设置了一个断点 - "$( ".ui-autocomplete-input" ).on( "blur", function( event )" 并且断点被击中，但代码不会单步执行。当我在这一行设置了一个断点 - “var autocomplete = $( this ).data( "autocomplete" );" 没有命中断点。

有任何想法吗？我对此束手无策。

4

2 回答 2

3

我通过对 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 });
    }
});
于 2013-09-30T18:53:32.177 回答
0

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

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

focus: function (event, ui) {
        if($("#streetid")) $("#streetid").val(ui.item.label); //this was my hidden variable
    }   
},
于 2016-08-30T03:11:21.703 回答