autocompletebox in modal popup bootstrap

Question

I have implemented a modal popup using bootstrap and include the jquery autocompletebox in it. However when i type something in text box, the suggestion text will appear behind the modal popup box but not 'inside' it. Is there anything i done wrong? Please advise, thanks alot!

My Razor view 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>

My 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")'
    });
})

Answer 1

Found out solution by modify as below:

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