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

【问题标题】：Parse JSON with jquery and add it to the textbox autocomplete list使用 jquery 解析 JSON 并将其添加到文本框自动完成列表中
【发布时间】：2013-01-27 11:42:46
【问题描述】：

我正在尝试构建一个自动完成文本框。我的脚本在 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>

我的控制器方法是：

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

        }

我的控制器返回 Json 数据如下：

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

我想 1]解析此数据和 2]将其附加到上述视图页面中的文本框。我该怎么做？

【问题讨论】：

您可以通过将dataType: "json" 添加到您的$.ajax() 参数来涵盖解析方面。这告诉函数期待 JSON 格式的响应。
@diggersworld 添加数据类型后无效
success回调中result的值是多少？
@Alexander 当我提醒结果时，它说 [object Object], [object Object]
试试alert ($.parseJSON(result));并告诉我们结果

标签： jquery asp.net-mvc json asp.net-mvc-4 jquery-autocomplete

【解决方案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)，.val() 将被检索到每个带有 'field' 类的标签

甚至是这样的：

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

虽然还没有测试过代码，只是想不通:)

【讨论】：

我想说明使用 .getJson 作为 .ajax 的替代品，以便不必指定内容类型等。此外，下面 Simon 的回答并没有真正意义；不需要为数组中的每个元素解析数据（parseJSON）

【解决方案2】：

解析返回的字符串以使其成为一个对象，然后以某种方式迭代该对象并将值插入到您想要插入的位置：

$(function() {
    $('.field').on('keyup', function() {
        $.ajax({
            url: "./js/" + this.value
        }).done(function(data) {
            var json = $.parseJSON(data);
            $.each(json, function(key, value) {
                 $(element).append(value);
            });
        });
    });
});

【讨论】：

它在firebug TypeError中显示错误：object is null [Break On This Error] length = object.length,
听起来您没有从服务器端返回格式正确的 JSON。
@adeneo $(element).append(value) 应该是 $(element).append(value.CountryName);还是类似的？
@BhushanFirake 如果你把 console.log(data);在“完成”回调中，它是输出 JSON 数组/对象还是字符串？
@thaJeztah - 你可能是对的，但它更多的是作为如何迭代和插入值的指南，因为我不确定 OP 是否真的知道这里返回的内容。跨度>