AutoComplete in the Search method

Jul 12, 2013 at 7:39 PM
Edited Jul 12, 2013 at 7:42 PM
First, this is a great tutorial! Very easy to follow and understand, even for a novice.

The issue I have is with the Autocomplete ActionResult used in the Home Controller. I followed the tutorial, but when I enter a string into the search area, I get a bullet list of the results being returned and this is not wrapped in a label as called for in the Home Controller. The only difference I have is with jquery version. 1.7.x is shown in the tutorial, and I have 1.8.x on my machine. to date, I have not attempted to change/downgrade versions.

Could this be the reason that I cannot get the Autocomplete to function correctly?

Thanks for all of the hard work, and I look forward to future tutorials!
Sep 1, 2013 at 12:31 PM
Edited Sep 1, 2013 at 12:32 PM
Try adding @Styles.Render("~/Content/themes/base/css") to your _Layout.cshtml page. The head section of the page should look like this:
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - Ode to Food</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
Oct 11, 2013 at 4:40 PM
The issue still persists with the above solution. Does anyone else know why the auto complete displays with bullet points?
Oct 11, 2013 at 5:44 PM
After fiddling with several jquery.ui css files, I managed to give autocomplete it's appropriate styling by adding the "~/Content/themes/base/jquery.ui.all.css" file to my Style bundle.
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.all.css",
                        "~/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"));