モーダルポップアップブートストラップのオートコンプリートボックス

Question

私はブートストラップを使用してモーダルポップアップを実装し、その中に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")' 
    }); 
}) 

Answer 1

：

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

を