3

我正在尝试构建一个自动完成文本框。我的脚本在 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]将其附加到上述视图页面的文本框中。我怎样才能做到这一点？

4

2 回答 2

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

虽然还没有测试过代码，只是在我的脑海中:)

于 2013-01-27T12:07:53.663 回答
0

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

$(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);
            });
        });
    });
});
于 2013-01-27T12:16:20.293 回答