jquery - 使用 jquery 解析 JSON 并将其添加到文本框自动完成列表中

Question

我正在尝试构建一个自动完成文本框。我的脚本在 Razor View 页面如下:

@model AutoComplete.Models.Country
@{
    ViewBag.Title = "Index";
}
@Scripts.Render("~/bundles/jquery")

<h2>Index</h2>
@Html.TextBoxFor(m => m.CountryName, new { Class = "field" })
<div class="keys"></div>

<script>
    $(function () {
        $('.field').keyup(function () {
            $.ajax({
                url: "./js/" + $('.field').val(),
                success: function (result) {
                }
            });
        });

    });
</script>

我的 Controller 方法是:

public ActionResult SearchByKey(string keyword)
        {
            CountryContext db = new CountryContext();
            var result= db.Countries.Where(x => x.CountryName.Contains(keyword));
            return Json(result , JsonRequestBehavior.AllowGet);

        }

我的 Controller 返回 Json 数据如下:

[{"CountryId":"1","CountryName":"India"},
 {"CountryId":"2","CountryName":"Indonesia"}
]

我想要 1]解析此数据并 2]将其附加到上述 View 页面中的文本框。我怎样才能做到这一点？

Answer 1

可能是一个更简单的解决方案:

$(function () {
    $('.field').keyup(function () {
        $.getJson("./js/" + $('.field').val(), function (result) {
            // result should contain the parsed JSON
        });
    });

});

示例可以在这里找到: http://api.jquery.com/jQuery.getJSON/

注意:“.field”的第二个选择器可能应该替换为 $(this)，将为每个具有“field”类的标签检索 .val()

或者甚至类似:

    $.on('keyup', '.field', function () {
        $.getJson("./js/" + $(this).val(), function (result) {
            // result should contain the parsed JSON
        });
    });

尚未测试代码，只是出于我的想法:)