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?