4

EF Code First で ASP.NET MVC3 を使用しています。これまで jQuery を使用したことはありません。モデルにバインドされているドロップダウン リストにオートコンプリート機能を追加したいと考えています。ドロップダウンリストには ID が格納され、値が表示されます。

では、jQuery UI オートコンプリート ウィジェットを接続して、ユーザーが入力しているときに値を表示し、ID を保存するにはどうすればよいでしょうか?

1 つのビューにも複数のオートコンプリート ドロップダウンが必要です。

このプラグインを見ました: http://harvesthq.github.com/chosen/しかし、自分のプロジェクトにもっと「もの」を追加したいかどうかわかりません。jQuery UI でこれを行う方法はありますか?

4

3 に答える 3

4

アップデート

jQueryUIオートコンプリートを紹介するサンプルプロジェクトをGitHubhttps://github.com/alfalfastrange/jQueryAutocompleteSampleのテキストボックスに投稿しました 。

私は通常のMVCTextBoxでそれを使用します

@Html.TextBoxFor(model => model.MainBranch, new {id = "SearchField", @class = "ui-widget TextField_220" })

これが私のAjax通話のクリップです

最初に、検索対象のアイテムの内部キャッシュをチェックします。見つからない場合は、コントローラーアクションへのAjaxリクエストを実行して、一致するレコードを取得します。

$("#SearchField").autocomplete({
    source: function (request, response) {
        var term = request.term;
        if (term in entityCache) {
            response(entityCache[term]);
            return;
        }
        if (entitiesXhr != null) {
            entitiesXhr.abort();
        }
        $.ajax({
            url: actionUrl,
            data: request,
            type: "GET",
            contentType: "application/json; charset=utf-8",
            timeout: 10000,
            dataType: "json",
            success: function (data) {
                entityCache[term] = term;
                response($.map(data, function (item) {
                    return { label: item.SchoolName, value: item.EntityName, id: item.EntityID, code: item.EntityCode };
                }));
            }
        });
    },
    minLength: 3,
    select: function (event, result) {
        var id = result.item.id;
        var code = result.item.code;
        getEntityXhr(id, code);
    }
});

これがすべてのコードではありませんが、ここでキャッシュがどのように検索され、Ajax呼び出しが行われ、応答で何が行われるかを確認できるはずです。select選択した値で何かできるようにセクションがあります

于 2012-05-23T21:33:06.650 に答える
0

これは私がFWIWにしたことです。

$(document).ready(function () {
    $('#CustomerByName').autocomplete(
    {
        source: function (request, response) {
            $.ajax(
            {
                url: "/Cases/FindByName", type: "GET", dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.CustomerName,
                            value: item.CustomerName,
                            id: item.CustomerID
                        }
                    })
                    );
                },

            });
        },
        select: function (event, ui) {
                    $('#CustomerID').val(ui.item.id);
                },
        minLength: 1
    });

});

よく働く！

于 2012-06-27T03:49:51.273 に答える
-1

私はこの問題を何度も見てきました。カスケード ドロップダウンでこれを解決する私のコードの一部を確認できます。投稿後に選択項目が失われます。

このリンクも役立つかもしれません - http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspx

于 2012-05-23T21:44:00.127 に答える