0

ユーザーがDRMCompanyName入力テキスト ボックスへの入力を開始すると、会社名と会社 ID の両方を表示するオートコンプリート機能が起動します。ユーザーが選択をクリックすると、会社名と ID がDRMCompanyNameテキスト ボックスに配置され、ID がDRMCompanyIdすぐ下のテキスト ボックスに配置されます。

コントローラーからjson結果が返されると、オートコンプリート ajax 関数のコードは、返される(会社名) に(会社 ID) を加えた値に等しくなるようにsuccess設定して、ドロップダウン リストに入力します。同様に、は(company id)のみに設定されます。labelvaluekeyvaluekey

ユーザーが特定の項目を選択すると、 がテキスト ボックスに、labelが に移動するはずです。ただし、結局、get が両方に配置されます。DRMCompanyNamevalueDRMCompanyIdvalue

コードを何度も精査しましたが、フィールドlabelに配置されない理由がわかりません。DRMCompanyName

jQuery

$(function () {
    $('#DRMCompanyName').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("compSearchByName", "AgentTransmission")',
                type: 'GET',
                dataType: 'json',
                data: request,
                success: function (data) {
                    response($.map(data, function (value, key) {
                        return {
                            label: value + " " + key,
                            value: key
                        };
                    }));
                },
            });
        },
        minLength: 2,
        select: function (event, ui) {
            console.log(ui);
            $('#DRMCompanyName').val(ui.item.label);
            $('#DRMCompanyName').text(ui.item.label);

            if ($('#DRMCompanyId').text() == '') {
                $('#DRMCompanyId').val(ui.item.value);
                $('#DRMCompanyId').text(ui.item.value);
            }
        }
    });
});

以下は、上記の関数のuiアイテムのサンプル スクリーン ショットです(プライバシーのために会社名は黒く塗りつぶされています)。selectオートコンプリート ドロップダウンでこの特定の項目をクリックすると、とフィールド200014の両方に配置されます。DRMCompanyNameDRMCompanyId

ここに画像の説明を入力

かみそりのマークアップ

    <div class="M-editor-field">
        @Html.TextBoxFor(model => model.DRMCompanyName)
        @Html.ValidationMessageFor(model => model.DRMCompanyName)
    </div>    

    <div class="M-editor-label">
        @Html.LabelFor(model => model.DRMCompanyId)
    </div>
    <div class="M-editor-field">
        @Html.TextBoxFor(model => model.DRMCompanyId, new { maxlength = 10, title = "Start typing company name to activate DRM Company Name lookup. When DRM Company is found, select to fill in DRM Company ID and DRM Company Name fields." })
        @Html.ValidationMessageFor(model => model.DRMCompanyId)
    </div>

編集

以下の回答の提案に従った後、select関数を次のように変更しました。

        select: function (event, ui) {
            console.log(tempResults[ui.item.value]);
            $('#DRMCompanyName').val(tempResults[ui.item.value]);
            $('#DRMCompanyName').text(tempResults[ui.item.value]);

            if ($('#DRMCompanyId').text() == '') {
                $('#DRMCompanyId').val(ui.item.value);
                $('#DRMCompanyId').text(ui.item.value);
            }
        }

読み出しに基づいてconsole.log、ユーザーがオートコンプリート項目をクリックすると、正しい値にアクセスします。ただし、値は両方のテキスト ボックスに配置されます。を選択したときに理解できないのは、実際にはInspect Elementの正しい値がDRMCompanyNameHTML に配置されているということですが、画面には表示されず、idまたはvalue(ではなく) のみが表示されますlabel。

ここに画像の説明を入力

4

1 に答える 1

2

label: value + " " + keyもちろん、ラベルにIDを追加する設定をしています。

を設定する$('#DRMCompanyName').val(ui.item.label);と、 で連結したもの$.mapが値に設定されます。

これを行う 1 つの方法は、ソース ajax 呼び出しのデータから一時的な結果セットを保存して、後でアクセスすることです。この一時セットを使用すると、後で使用するために任意のオブジェクトまたはキー/値を取得できます。

結果を取得するときは、結果の一時リストを保存します。

var tempResults = [];

...
source: function (request, response) {
    $.ajax({
        url: '@Url.Action("compSearchByName", "AgentTransmission")',
        type: 'GET',
        dataType: 'json',
        data: request,
        success: function (data) {
            tempResults = data;

            response($.map(data, function (value, key) {
                return {
                    label: value + " " + key,
                    value: key
                };
            }));
        },
    });
}

次に、選択時に、保存されたデータにアクセスして値を設定できるようになりました。

select: function (event, ui) {
    event.preventDefault();
    var name = tempResults[ui.item.value].value;
    var id = tempResults[ui.item.value].key;

    $('#DRMCompanyName').val(name);
    $('#DRMCompanyName').text(name);

    if ($('#DRMCompanyId').text() == '') {
        $('#DRMCompanyId').val(id);
        $('#DRMCompanyId').text(id);
    }
}

編集

些細なことを一つ忘れる！これを関数の先頭に追加してくださいselect:!

event.preventDefault();

デフォルトでは、選択時に、オートコンプリートは を使用して、関連付けui.item.valueられている要素を入力します。を使用event.preventDefault()すると、既に接続されているイベント ハンドラーがオートコンプリート内で使用されるのを防ぐことができます。

event.preventDefault() ドキュメント。

于 2013-06-12T18:26:57.487 に答える