JQuery UI自动完成ASP.NET MVC5渲染列表

Question

在ASP.NET MVC5应用程序中，我有一个使用JQuery UI的自动完成框。问题是自动完成的建议似乎是使用<li>元素。

就像你可以看到的，当我在“NomProprio”字段中输入“r”时，我看到一个包含2个“Robin”的列表。 （这是正常的，在我的数据库中，我有2个用户名为“Robin”）。但名称看起来像一个列表。我不希望这样。我想要这样的东西：http://jqueryui.com/autocomplete/。

这是我的带有脚本的View Create.cshtml：

    @ Html.LabelFor（model =＆gt; 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>
}

这些是我在布局中包含的脚本

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

这些是我收录的包

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

最后，我的方法是获取名单：

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

为什么自动完成呈现为列表？