Question

如果用户在表单上的文本框中键入内容，并且他们输入的内容开始与数据库中已有的值匹配，如何让文本框提供自动填充其余内容的选项用户想要根据数据库中已有的值输入什么内容？

考虑我的数据库中有这个表（表名Person）：

|ID|    |FirstName|    |LastName|
 1        John           Smith
 2        Tom            Jones
 3        James          Davis

在用户想要创建新Person的表单上，他们开始在 jo 中输入FirstName文本框..如何将文本框输入到可以选择自动填充 hn 并将第一个字母大写为拼写 John ？

感谢任何帮助。

更新

控制器：

[HttpPost]
    [ValidateAntiForgeryToken]
    public JsonResult Create([Bind(Include = "ID,text,subcategory")] Activity codeAC, string term)
    {
        if (ModelState.IsValid)
        {
            var result = (from r in db.Activities
                          where r.subcategory.ToUpper().Contains(term.ToUpper())
                          select new { r.subcategory }).Distinct();

            db.Activities.Add(codeAC);
            db.SaveChanges();
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        return Json(codeAC);
    }

脚本：

<script type="text/javascript">
$(document).ready(function () {
    $('#Categories').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Activities/Create",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.subcategory, value: item.subcategory };
                    }))
                }
            })
        },
        messages: {
            noResults: "", results: ""
        }
    });
})

CSHTML：

<div class="form-group">
    @Html.LabelFor(model => model.subcategory, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.subcategory, new { htmlAttributes = new { @id = "Categories", @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.subcategory, "", new { @class = "text-danger" })
    </div>
</div>

Answer 1

我明白了。我不知道我无法将其合并到我的 Create ActionResult中..所以我创建了一个单独的JsonResult方法，它正在工作。

<强>控制器：

public JsonResult AutoCompleteCategory(string term)
{
    var result = (from r in db.Activities
                  where r.subcategory.ToUpper().Contains(term.ToUpper())
                  select new { r.subcategory }).Distinct();

    return Json(result, JsonRequestBehavior.AllowGet);
}

<强> SCRIPT：

<script type="text/javascript">
$(document).ready(function () {
    $('#Categories').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Activities/AutoCompleteCategory",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.subcategory, value: item.subcategory };
                    }))
                }
            })
        },
        messages: {
            noResults: "", results: ""
        }
    });
})
</script>

TextBox自动填充

1 个答案: