title: Autocomplete search is not displaying suggestions in asp.net mvc?
body: <p>I want to display the autocomplete suggestion in the drop-drop list. But the suggestions are not displaying. I have tried with database and through list but result remains the same.</p>
  
  <p><strong>Here is the Code</strong></p>
  
  <p>Model contains ID and Name</p>
  
  <p><strong>HomeController.cs</strong></p>
  
  <pre><code> public class HomeController : Controller
  {
      // GET: Home  
      [HttpGet]
      public ActionResult Index()
      {
          return View();
      }
      [HttpPost]
      public JsonResult Index(string Prefix)
      {
          //Note : you can bind same list from database  
          List&lt;City&gt; ObjList = new List&lt;City&gt;()
          {
  
              new City {Id=1,Name="abc" },
              new City {Id=2,Name="def" },
              new City {Id=3,Name="ghi" },
              new City {Id=4,Name="jkl" },
  
      };
          //Searching records from list using LINQ query  
          var CityName = (from N in ObjList
                          where N.Name.StartsWith(Prefix)
                          select new { N.Name });
          return Json(CityName, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p><strong>Index.cs</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;  
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;  
  &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;  
  &lt;script type="text/javascript"&gt;  
      $(document).ready(function () {  
          $("#CityName").autocomplete({  
              source: function (request, response) {  
                  $.ajax({  
                      url: "/Home/Index",  
                      type: "POST",  
                      dataType: "json",  
                      data: { Prefix: request.term },  
                      success: function (data) {  
                          response($.map(data, function (item) {  
                              return { label: item.Name, value: item.Name };  
                          }))  
  
                      }  
                  })  
              },  
              messages: {  
                  noResults: "", results: ""  
              }  
          });  
      })  
  &lt;/script&gt;  
  @using (Html.BeginForm())  
  {  
      @Html.AntiForgeryToken()  
  
      &lt;div class="form-horizontal"&gt;  
  
          &lt;hr /&gt;  
  
          &lt;div class="form-group"&gt;  
  
              &lt;div class="col-md-12"&gt;  
                  @Html.EditorFor(model =&gt; model.CityName, new { htmlAttributes = new { @class = "form-control" } })  
  
              &lt;/div&gt;  
          &lt;/div&gt;  
  
      &lt;/div&gt;  
  }  
  </code></pre>
  
  <p>Please if anyone can guide me what am i lacking?
  Thanks in advance.</p>