Error Suggestion autocomplete Textbox MVC and Javascript

Question

Hi to all and thanks for your help,

I have a text with autocomplete suggestions in MVC.

The textbox in the view is:

   <form action="Locator">
      <div class="col-lg-3 col-md-3 hidden-sm hidden-xs" style="margin-top:2%;">
         <input type="text" class="formLocator" value="Milano" data-date-end-date="0d" id="textLocator" name="searchstring">
         <h4 class="FormTextLocator">dove</h4>
      </div>
   </form>

I have created a javascript code for this textbox:

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
    // Locator
    $("#textLocator").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Home/AutocompleteSuggestions",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { value: item.name };
                    }))
                }
            })
        },
        messages: {
            noResults: "", results: ""
        }
    });
});

And the controller associated is:

[HttpPost]
public JsonResult AutocompleteSuggestions(string term)
{
   var db = new TocFruit();
   var suggestions = from s in db.city select s.name;
   var namelist = suggestions.Where(n => n.ToString().ToLower().StartsWith(term.ToLower()));
   return Json(namelist, JsonRequestBehavior.AllowGet);
}

The autocomplete value are passed to view but this is the result view:

Please help me, i really don't know what to do.

Thanks to all,

Roberto

Answer 1

I think you forget to mention label in Autocomplete

$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
// Locator
$("#textLocator").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Home/AutocompleteSuggestions",
            type: "POST",
            dataType: "json",
            data: { term: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { 
                             value: item.name,
                             label : item.name
                           };
                }))
            }
        })
    },
    messages: {
        noResults: "", results: ""
    }
});

});