title: JQuery UI AutoComplete ASP.NET MVC5 rendering as a list
body: <p>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 <code>&lt;li&gt;</code> elements. </p>
  
  <p><img src="https://i.imgur.com/QhdqX0S.png" alt=""></p>
  
  <p>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 : <a href="http://jqueryui.com/autocomplete/" rel="nofollow noreferrer">http://jqueryui.com/autocomplete/</a>.</p>
  
  <p>Here is my View Create.cshtml with scripts :</p>
  
  <p>
      @Html.LabelFor(model => model.Possession.Proprietaire.NomProprio, new { @class = "control-label col-md-2" })
      
       
      
     </p>
  
  <pre><code>@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
  
   &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
     $('#autocomplete-with-hidden').autocomplete({
      source: '@Url.Action("GetListForAutocomplete")'
     });
    })
   &lt;/script&gt;
  }
  </code></pre>
  
  <p>These are the scripts I have included in my Layout</p>
  
  <pre><code> @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)
  </code></pre>
  
  <p>These are the bundles I have included</p>
  
  <pre><code>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"));
  </code></pre>
  
  <p>and finally, my methode to get the list of names :</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>Why does the autocomplete render as a list?</p>