3

オートコンプリートテキストボックスを作成しようとしています。私のスクリプトは、RazorViewページで以下のとおりです。

@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' の 2 番目のセレクターは、おそらく $(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 に答える