Jquery autocomplete css error - html

Question

I am trying to create a jquery autcomplete in ASP.NET MVC, but I have a problem: the results list is not sticking under the input textbox. Here is a printscreen:
http://prntscr.com/c1voo4
This is my 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>
And this is my CSS:
#autocomplete-button{
width: 3.5%;
display: inline;
background-color: orangered;
border-color: orangered;
}
#autocomplete-textbox{
width: 17.5%;
display: inline
}

Answer 1

I implemented JQuery Autocomplete in this way and it is working perfectly for me..
$(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);
}
});
}
})