Javascript 模式弹出引导中的自动完成框

我已经使用bootstrap实现了一个模式弹出窗口，并在其中包含了jquery自动完成框。但是，当我在文本框中键入内容时，建议文本将显示在模式弹出框的后面，而不是“内部”。我做错什么了吗？请告知，非常感谢

我的Razor视图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>

---

通过以下修改找到解决方案：

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

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