title: MVC - Bootstrap autocomplete Typeahead
body: <p>I want to create autocomplete in my MVC site on a textbox with bootstrap typeahead but its not working.</p>
  
  <pre><code>@Html.EditorFor(model =&gt; model.Address.Name)
  
  @Html.ValidationMessageFor(model =&gt; model.Address.Name)
  
  
  // AUTOCOMLETE
          $("#Address_Name").typeahead({
              source: function (request, response) {
                  $.ajax({
                      url: "/Home/Places",
                      type: "POST",
                      dataType: "json",
                      data: { term: request },
                      success: function (data) {
                          response($.map(data, function (item) {
                              return { label: item.Name + ' - ' + item.Address, value: item.Name };
                          }))
  
                      }
                  })
              },
              messages: {
                  noResults: "", results: ""
              }
          });
  </code></pre>
  
  <p>In the Controller:</p>
  
  <pre><code>// AUTOCOMPLETE - Places
      public ActionResult Places(string term)
      {
          var result = (from r in unitOfWork.AddressRepository.Get()
                           where r.Name.ToLower().Contains(term.ToLower())
                        select new { r.Name, Address = r.Street }).Distinct();
  
          return Json(result, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>In the <code>Controller</code> if I put a breakpoint I see in the <code>String</code> term what I wrote to the textbox and the result contains all of the found elements.</p>
  
  <p>When I print the 'data' in the 'Success' section, the message is:</p>
  
  <blockquote>
    <p>[object Object] [object Object] [object Object] [object Object]</p>
  </blockquote>