自动填充功能看起来不正确

时间:2017-08-23 15:14:36

标签: c# jquery html css asp.net

我的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:

> <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>

有人有想法吗?感谢。

1 个答案:

答案 0 :(得分:1)

你不包括jQuery UI自动完成css样式表。

你的包应该是这样的:

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

当然您还需要包含其他样式表   你的风格束的一部分。

像这样添加

@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"));