7

DB から名前のリストを取得する jQuery オートコンプリート テキスト ボックスを作成する必要があります。選択すると、ユーザーが適切なページ リンクに移動します。

この投稿のようなことをしようとしています: jQuery オートコンプリートの選択からコントローラー アクションを起動する

解決策は理にかなっており、クリックとリダイレクトは機能しますが、名前の文字列リスト以上のものを返す方法がわかりません。

現在のコントローラー コード (スニペット):

        List<string> Names = new List<string>();
        foreach (Child c in listfromDB)
        {
            Names.Add(c.Name);
            //childNames.Add(new KeyValuePair<string, int>(c.Name, c.ID));
        }
        return Json(Names);

KeyValuePairうまくいかなかったようです。代わりにオブジェクト配列を作成するにはどうすればよいですか?

私のjQueryコード:

$(document).ready(function () {
$("#find-child-box").autocomplete({
source: function (request, response) {
    // define a function to call your Action (assuming UserController)
    $.ajax({
        url: '/Admin/AutoCompleteMyChildren', type: "POST", dataType: "json",

        // query will be the param used by your action method
        data: { query: request.term },
        success: function (data) {
            response($.map(data, function (item) {
                return { label: item, value: item };
            }))
        }
    })
},
minLength: 1, // require at least one character from the user
select: function(event, ui) {
alert('mom');
    window.location.href = ui.item.value;
}
}); 
});
4

2 に答える 2

7

実際、オートコンプリートは、文字列の配列のみを返すソースで正常に機能します。コントローラーのアクションを変更しなくても、これは問題なく機能するはずです。

JavaScript:

$(document).ready(function () {
    $("#find-child-box").autocomplete({
        source: function (request, response) {
            // define a function to call your Action (assuming UserController)
            $.ajax({
                url: '/Admin/AutoCompleteMyChildren', 
                type: "POST", 
                dataType: "json",
                // query will be the param used by your action method
                data: { query: request.term },
                success: response
            });
        },
        minLength: 1, // require at least one character from the user
        select: function(event, ui) {
            alert(ui.item.ID);
            window.location.href = ui.item.value;
        }
    }); 
});

jQueryUI オートコンプリートの概要タブをチェックして、ウィジェットが期待するデータの種類を確認してください。

あなたのコメントごと：

@Alex が示唆しているように、コントローラ アクションのデータを変更する必要があります。次のようなものを使用して、正しいオブジェクト配列を作成できます。

return Json(listfromDB.Select(c => new { label = c.Name, ID = c.ID }));

次のような JSON を生成する必要があります。

[{ label: 'Scott', ID: '1234' }, ...]

どのオートコンプリートが正しく使用できるか。ui.item次に、オートコンプリートのイベント ハンドラー内で (たとえば)いつでもselectアクセスできるようにしますui.item.ID。

于 2012-09-28T02:22:37.890 に答える
1

Child タイプを格納するリストを作成してみてください

List<Child> children = new List<Child>();

 foreach (Child c in listfromDB)
{

      children.Add(c);

}

 return Json(children);

Jsonが異なるため、おそらくエンドコードを再構築する必要はありません。

DB から Child のすべてのプロパティが必要ない場合は、カスタム クラスを作成し、必要なものを追加します。

class CustomChild{

   public string Name {get; set;}
   public int ID { get; set ;}


}

List<CustomChild> children = new List<CustomChild>();

 foreach (Child c in listfromDB)
{

      children.Add(new CustomChild{ Name = c.Name, ID = c.ID} );

}

構文を操作して機能させるか、いくつかの参照を追加する必要がある場合があります。LINQ について調べることをお勧めします。

于 2012-09-27T23:12:18.727 に答える