模态弹出式引导程序中的自动完成框

时间:2016-03-30 03:08:15

标签: javascript jquery autocomplete modal-dialog bootstrap-modal

我使用bootstrap实现了一个模态弹出窗口,并在其中包含了jquery autocompletebox。但是当我在文本框中输入内容时,建议文本将出现在模态弹出框后面,但不会出现在“内部”。我做错了什么吗?请指教,非常感谢!

我的剃刀查看cshtml:

 <div class="modal fade" id="impersonation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Impersonation</h4>
                    </div>

                    <div class="modal-body">
                        <div class="form-horizontal">
                                @Html.Label("Impersonate", htmlAttributes: new { @class = "control-label col-md-4" })
                                @Html.TextBox("UserName", null, htmlAttributes: new { @class = "form-control" })                         
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <a class="btn btn-danger btn-ok" id="impersonate" data-dismiss="modal">Start Impersonation</a>
                    </div>
                </div>
            </div>
        </div>

我的javascript:

$('#impersonation').on('show.bs.modal', function (e) {
    $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
    $(this).find('.btn-ok').attr('custom', $(e.relatedTarget).data('custom'));
});

$(document).ready(function () {
    $("#UserName").autocomplete({
        source: '@Url.Action("AutoCompleteUser","UserRoles")'
    });
})

1 个答案:

答案 0 :(得分:1)

通过以下修改找出解决方案:

$(document).ready(function () {
        $("#UserName").autocomplete({
            source: '@Url.Action("AutoCompleteUser","UserRoles")',
            appendTo: $('.modal-body')
        });
    })