html - Jquery 自动完成 css 错误

Question

我正在尝试在 ASP.NET MVC 中创建一个 jquery 自动完成，但我遇到了一个问题:结果列表没有粘在输入文本框下面。这是一个打印屏幕:

http://prntscr.com/c1voo4

这是我的 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>

这是我的 CSS:

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

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

Answer 1

我以这种方式实现了 JQuery Autocomplete，它对我来说工作得很好..

$(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);
                            }
                        });
                    }
})