Jquery ui jquery ui自动完成与自动选择插件

我使用的是jQueryUI自动完成。当用户输入自己的值，而不是从列表中选择项目时，文本框将清除。这没关系（我不希望用户能够输入自己的值），除非用户输入的值确实存在于列表中

我试着使用后文中详细介绍的autoSelect插件，但它不起作用-我添加了该插件，但当我在列表中键入一个值并点击tab时，我得到的结果与之前相同-文本框被清除

这是我的自动完成：

$(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”）。在（“blur”，function（event）”上，断点被击中，但代码无法通过。当我在这一行设置断点-“var autocomplete=$（this）.data（“autocomplete”）；”时，断点没有被击中

---

有什么想法吗？我对此束手无策。

我通过对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 });
    }
});

---

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

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

focus: function (event, ui) {
        if($("#streetid")) $("#streetid").val(ui.item.label); //this was my hidden variable
    }   
},

---

从1.9版开始，最新的可用版本似乎与jQuery.UI不兼容。根据，您需要将jQuery.UI降级为1.8.BTW，一个小补丁将有助于使插件与jQueryUI 1.9兼容。@Stan当我最初编写此插件时（几个月前）我找到了那篇文章，它帮助了我。除了那篇文章之外，我还做了一些其他的调整（发布了下面的最终版本），但这让我开始了。所以，感谢你为其他可能需要它的人发帖。