c# - 自动完成看起来不正确

Question

我的 jQuery 自动完成有问题。

它看起来像这样: Autocomplete error

我的代码是:

<div>
    @using (Ajax.BeginForm("Vyhledej", new AjaxOptions() { UpdateTargetId = "dynamicContent", InsertionMode = InsertionMode.Replace }))
    {
        <div class="form-group" role="group" aria-label="Basic example">
            <input type="text"  style="width:350px; margin-right:4px; " class="form-control pull-left" placeholder="Zadej značku" id="searchBox" name="shoda">
            <button type="submit" class="btn-sm btn-default pull-left">Vyhledat</button>
        </div>
</div>

和 Java 脚本:

> <script type="text/javascript">
>     $(function () {
>         $("#searchBox").autocomplete({
>             source: function(request, response) {
>                 $.ajax({
>                     url: "@Url.Action("VyhledejKolobezky", "Kolobezky")",
>                     dataType: "json",
>                     data: {
>                         query: request.term
>                     },
>                     success: function(data) {
>                         response(data);
>                     }
>                 });
>             },
>             minLength: 2
>     });
>     }); </script>

有人知道吗？谢谢。

Answer 1

您没有包含 jQuery UI 自动完成 css 样式表。

您的包应如下所示:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
              "~/Content/themes/base/jquery.ui.autocomplete.css"));

Of course you will also need to include your other stylesheets as part of your stylebundle.

这样添加

@Styles.Render("~/Content/themes/base/css")

如果您还想在 StyleBundle 中包含其余的 JQuery UI 样式表，请引用:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
              "~/Content/themes/base/jquery.ui.core.css",
              "~/Content/themes/base/jquery.ui.resizable.css",
              "~/Content/themes/base/jquery.ui.selectable.css",
              "~/Content/themes/base/jquery.ui.accordion.css",
              "~/Content/themes/base/jquery.ui.autocomplete.css",
              "~/Content/themes/base/jquery.ui.button.css",
              "~/Content/themes/base/jquery.ui.dialog.css",
              "~/Content/themes/base/jquery.ui.slider.css",
              "~/Content/themes/base/jquery.ui.tabs.css",
              "~/Content/themes/base/jquery.ui.datepicker.css",
              "~/Content/themes/base/jquery.ui.progressbar.css",
              "~/Content/themes/base/jquery.ui.theme.css"));