0

jQueryUIオートコンプリートの使用-「エージェント」のリストとそのIDを返します。コントローラーは、正しいJSONを返します。例：

[{"tvid":12,"agentName":"Smith Gary"},{"tvid":43,"agentName":"Walls Arthur"},{"tvid":623,"agentName":"Mena Ati"}]

私のJavaScriptは次のとおりです。

   $("#tvID").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/AgentList/AutoCompleteAnalyst",
            type: "POST",
            dataType: "json",
            data: { term: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { value: item.tvid, label: item.agentName };
                }))
            }
        })
    },
    messages: {
        noResults: "", results: ""
    }
});

そして私の見解は：

     <div class="editor-label">
        @Html.LabelFor(model => model.tvID)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.tvID)
        @Html.ValidationMessageFor(model => model.tvID)
    </div>

オートコンプリートは[OK]と表示されますが、リストから名前を選択すると、上のテキストボックスに入力されるのはtvIDです（必要なtvIDであるため、データベースに有効です）。テキストボックスにagentNameを表示し、コントローラーに投稿するときに検証エラーが発生しないようにします。

オートコンプリートは正しく表示されます

オートコンプリートは正しく表示されます

ただし、agentNameではなくtvIDがボックスに表示されます

ただし、agentNameではなくtvIDがボックスに表示されます

助けてくれてありがとう、

マーク

4

2 に答える 2

2

これを試して、うまくいくかどうか教えてください：

$("#tvID").autocomplete({
source: function (request, response) {
    $.ajax({
        url: "/AgentList/AutoCompleteAnalyst",
        type: "POST",
        dataType: "json",
        data: { term: request.term },
        success: function (data) {
            response($.map(data, function (item) {
                return { value: item.tvid, label: item.agentName };
            }))
        }
    })
},
messages: {
    noResults: "", results: ""
}
}).data("autocomplete")._renderItem = function(ul,item){
  return $("<li>")
                .append($("<a>").text(item.label)).append($("input:hidden")).attr("name","some_name").val(item.tvid)
                .appendTo(ul);
};

注: テキスト ボックスではなく非表示フィールドから値を取得するため、これを使用するにはモデルを少し変更する必要がある場合があります。テキスト ボックスには名前のみが表示されます。

于 2013-02-28T16:22:26.447 に答える
2

gaurav が示唆したように、非表示の入力タグを挿入することは、オートコンプリートをそのまま使用するのと同じくらい良いことです。オプションにはラベルと値がありますが、いずれかを選択すると、値が表示されている入力コントロールに配置され、その作業が完了します。

私が見ることができるいくつかのオプションがあります。

オートコンプリートをカスタマイズする

2 つの入力を使用できます。名前用のダミーの表示されたものと、送信する (モデルにバインドされた) 値用の非表示の 1 つです。select次に、ラベルを取得してそれを可視入力に入れ、値をモデルにバインドされた非表示入力に入れる独自のハンドラーを作成することで、オートコンプリートの動作方法を変更できます。

2 つの入力があると仮定すると、1 つ目は表示され、検索のためにユーザー入力を受け取ります。2 つ目は非表示で、送信/バインディングの値を格納し、tvidValue のクラスを持ちます。おそらく、次のようにオートコンプリートを構成できます。

focus: function( event, ui ) {
  //prevent the autocomplete's input from changing as the
  //user navigates the available options.
  this.selectedItem = null;
  return false;
},
select: function( event, ui ) {
  if ( ui.item ) {
  valueCtl = $this.next("input.tvidValue").val(ui.item.value);
  this.value = ui.item.label;
  return false;
  }
}

次に、HTML で次のようなものを使用すると、tvidDisplay でオートコンプリートをフックできます。

<input class='tvidDisplay' />
@Html.EditorFor(model => model.tvID, new { @class='tvidValue', style='display:none' })

このアプローチの欠点は、以前の値が (編集ページで、またはサーバー側の検証が失敗してビューに戻った後に) 表示されることです。モデルにバインドされた非表示の入力フィールドから値を取得し、それを名前に解決して表示フィールドに格納するには、小さな関数を追加する必要があります。これは、これらの値の両方を含む ViewModel を使用することで軽減できます。

さらに、ユーザーが検索フィールドを編集しても、有効なオートコンプリート値を選択しない場合、selectハンドラーは起動せず、非表示の入力の値を更新する必要がありません。

オートコンプリートをラップするカスタム コントロール

2 番目のアプローチ (私が選択したもの) は、オートコンプリートの上にラッパーを作成することでした。名前とそれを削除するための [x] を表示する HTML 内に隠し入力を生成します。オートコンプリート ボックスは私のモデルにバインドされることはありません。これは純粋にマークアップです。生成された入力には適切な name 属性が与えられるため、送信時に他のフォーム要素と同様にロールアップされ、デフォルトのモデル バインダーによってバインドされます。1 人または複数人をサポートし、JSON オブジェクトから値を復元する機能 (編集ページで使用するため) などがあります。

まだ初期のバージョンですが、内部的には問題なく動作しています。さまざまなサービス エンドポイントをより柔軟に使用できるようにいくつかの更新を行い、 GitHub (ライブ デモ)に投稿しました。非表示の入力フィールドに値を格納する方法を変更するために を変更することをお勧めしgetEntityHtmlます。現在は、値とラベルをセミコロンで結合しています。これはサーバー側では便利ですが、すべての人に適しているとは限りません。コントロールは jQuery オートコンプリートを使用し、jQuery UI テーマを使用している場合にページのルック アンド フィールに一致するように jQuery UI クラスで装飾されています。

完全な開示：その中で「私」を使用していて明確でない場合は、私が著者です。

于 2013-02-28T17:05:10.980 に答える