自动完成功能在Bootstrap模式对话框上第二次无效

时间:2014-08-27 14:20:25

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

我有一个bootstrap模式对话框,我有一个自动完成输入。

当我打开对话框时,我启动了该功能:

<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');关闭对话框并第二次启动它时,自动完成功能无效。

为什么,你能解释一下吗?

1 个答案:

答案 0 :(得分:0)

以前,我使用相同的方法,因此也遇到了相同的问题,以解决我进行以下更改的问题:

介绍了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");

}