自动完成在 Bootstrap 模态对话框上第二次不起作用答案

【问题标题】：Autocomplete does NOT work second time on Bootstrap Modal Dialog自动完成在 Bootstrap 模态对话框上第二次不起作用
【发布时间】：2023-03-28 00:01:01
【问题描述】：

我有一个引导模式对话框，其中有一个用于自动完成的输入。

当我打开对话框时，我会启动该功能：

<code>
$(document).on('keyup', 'input[name=item]', function() {
    var products = new Array();
    /* Get All Products */
    $.ajax({
        url: 'index.php?route=order/order/getproducts',
        type: 'get',
        dataType: 'json',
        success: function(json) {
            for (i = 0; i < json.length; i++) {
                products[i] = json[i];
            }
        }
    });
    /* Autocomplete By Got Products */
    $(this).autocomplete({
        source: products
    });
    $(this).autocomplete('option', 'appendTo', '.item');
});
</code>

而且自动完成效果很好。

但是当我通过$(myModal).modal('hide'); 关闭对话框并第二次启动它时，自动完成功能不起作用。

为什么，你能解释一下吗？

【问题讨论】：

“第二次不工作”问题通常是在关闭按钮时未能解除绑定的情况。因为你只是“隐藏”它，你实际上并没有解开它。所以，试试$(myModal).modal('hide').off();
你能在 jsfiddle 上重现这个问题吗？
如果我添加 '.off()' 隐藏停止工作。
不，我无法在 jsfiddle 上重现此内容，因为我无法在那里创建模式。

标签： javascript jquery twitter-bootstrap jquery-ui autocomplete

【解决方案1】：

早些时候，我使用了相同的方法，所以我也遇到了同样的问题，为了解决我做了以下更改：

引入onkeypress事件：

<input id="superAdminEmail" onkeypress="onTextInsert()" name="Email" class="form-control" required>

更新javascript代码：

function onTextInsert() {
$("#superAdminEmail").autocomplete({
    source: function (request, response) {
        showLoaderScreen();
        $.ajax({
            type: 'GET',
            url: '/admin/getadminemailsuggestion',
            data: { 'prefixemail': $("#superAdminEmail").val() },
            success: function (result) {
                response($.map(result, function (item) {
                    var res = { label: item.Email, value: item.Name };
                    hideLoaderScreen();
                    return res;
                }));
            },
            error: function (error) {
                hideLoaderScreen();
            }
        });
    },
    select: function (event, ui) {
        $("#superAdminEmail").val(ui.item.label);
        $("#superAdminName").val(ui.item.value);
        return false;
    }
});

$("#superAdminEmail").autocomplete("option", "appendTo", "#superAdminModal");

}

【讨论】：