Jquery Autocomplete Css Fehler

Question

Ich versuche, eine Jquery Automplete in ASP.NET MVC zu erstellen, aber ich habe ein Problem: Die Ergebnisliste bleibt nicht unter dem Eingabetextfeld. Hier ist ein Printscreen:

http://prntscr.com/c1voo4

Das ist mein HTML:

<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/autocomplete.js")" type="text/javascript"></script> 

<div> 
    @using (@Html.BeginForm("Index", "Home", FormMethod.Post)) 
    { 
     <div class="ui-widget autocomplete-div"> 
      @Html.TextBox("term", null, new 
      { 
       id = "autocomplete-textbox", 
       @class = "form-control", 
       placeholder = "Enter Name.." 
      }) 
      <button type="submit" value="Search" class="btn btn-primary" id="autocomplete-button"> 
       <span class="glyphicon glyphicon-search"></span> 
      </button> 
     </div> 
    } 
</div> 
<script> 
     $(function() { 
      $('#autocomplete-textbox').autocomplete({ 
       source: '@Url.Action("AutoComplete")', 
       minlength: 1 
      }); 
     }); 
<script> 

Und das ist mein CSS:

#autocomplete-button{ 
width: 3.5%; 
display: inline; 
background-color: orangered; 
border-color: orangered; 
} 

#autocomplete-textbox{ 
width: 17.5%; 
display: inline 
} 

Answer 1

I JQuery Autocomplete auf diese Weise umgesetzt und es funktioniert perfekt für mich ..

$(function(){ 
    var url = '@Url.Action("GetData", "Home")'; 
       $('#txtData').autocomplete({ 
        source: function (request, response) { 
         $.ajax({ 
          url: url, 
          data: { 'Prefix': request.term }, 
          type: 'GET', 
          async: false, 
          cache: false, 
          dataType: 'json', 
          success: function (json) { 
           response($.map(json, function (data, id) { 
            return { 
             label: data, 
             value: data 
            }; 
           })); 
          }, 
          error: function (xmlHttpRequest, textStatus, errorThrown) { 
           console.log('some error occured', textStatus, errorThrown); 
          } 
         }); 
        } 
})