MVC - Bootstrap autocomplete Typeahead

Question

I want to create autocomplete in my MVC site on a textbox with bootstrap typeahead but its not working.

@Html.EditorFor(model => model.Address.Name)

@Html.ValidationMessageFor(model => 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: ""
            }
        });

In the Controller:

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

In the Controller if I put a breakpoint I see in the String term what I wrote to the textbox and the result contains all of the found elements.

When I print the 'data' in the 'Success' section, the message is:

[object Object] [object Object] [object Object] [object Object]

Answer 1

You can create simple HTML5 Autocomplete in Boostrap like this

HTML

<label class="label">Input with autocomlete</label>
       <label class="input">
                        <input type="text" list="list">
                        <datalist id="list">
                            <option value="Alexandra"></option>
                            <option value="Alice"></option>
                            <option value="Anastasia"></option>
                            <option value="Avelina"></option>
                        </datalist>
        </label>