Question

我想在我的MVC网站上使用bootstrap typeahead在文本框中创建自动完成功能但是它不起作用。

@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: ""
            }
        });

在控制器中：

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

在Controller中，如果我放置断点，我会在String术语中看到我写入文本框的内容，结果包含所有找到的元素。

当我在“成功”部分打印“数据”时，消息为：

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

Answer 1

您可以像这样

在Bootstrap中创建简单的HTML5自动完成功能

<强> 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>

MVC - Bootstrap自动完成Typeahead

1 个答案: