Autocomplete does not look properly

Question

I have a problem with my jQuery autocomplete.

It's looks like this: Autocomplete error

My code is:

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

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

Does anybody have idea? Thanks.

Answer 1

You arent including the jQuery UI autocomplete css stylesheet.

Your bundle should look something like this:

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.

Add it like this

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

For reference if you also want to include the rest of the JQuery UI stylesheets in your StyleBundle:

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