JQuery UI AutoComplete ASP.NET MVC5 rendering as a

2019-09-18 16:03发布

问题:

In an ASP.NET MVC5 application, I have an AutoComplete box using JQuery UI. The problem is that the suggestions for the AutoComplete appears to be using <li> elements.

Like you can see, when i type "r" in "NomProprio" field, I see a list with 2 "Robin". (It's normal, in my database, I have 2 users with "Robin" as name). But the names appears like a list. I don't want that. I want something like that : http://jqueryui.com/autocomplete/.

Here is my View Create.cshtml with scripts :

@Html.LabelFor(model => model.Possession.Proprietaire.NomProprio, new { @class = "control-label col-md-2" })

@section Scripts {
 @Scripts.Render("~/bundles/jqueryval")

 <script type="text/javascript">
  $(document).ready(function() {
   $('#autocomplete-with-hidden').autocomplete({
    source: '@Url.Action("GetListForAutocomplete")'
   });
  })
 </script>
}

These are the scripts I have included in my Layout

 @Styles.Render("~/Content/css")
 @Styles.Render("~/Content/themes/base/css")
 @Scripts.Render("~/bundles/modernizr")
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrap")
 @Scripts.Render("~/bundles/jqueryui")
 @RenderSection("scripts", required: false)

These are the bundles I have included

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
  "~/Scripts/jquery-ui-{version}.js"));

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

and finally, my methode to get the list of names :

public ActionResult GetListForAutocomplete(string term)
{      
 var result = from p in db.Proprietaire
  where p.NomProprio.ToLower().Contains(term)
  select p.NomProprio;
 return Json(result, JsonRequestBehavior.AllowGet);
}

Why does the autocomplete render as a list?