最新バージョンの Select2 を使用してサイトの API をクエリし、複数選択を返そうとしています。正しいデータをフェッチし、ドロップダウンを適切にフォーマットし、返されたオブジェクトの 2 つのキーを「(A-123) John Johnson」として結合しますが、ドロップダウンはマウスオーバーやクリックに応答しません。
select2.full.min.js および select2.min.css ファイルを使用しています。プロジェクトの目的のために、それらをディレクトリに含め、CDN 経由ではなく、cshtml のバンドル経由でアクセスしています。
HTML:
<div>
<select class="user-list" multiple="multiple" style="width: 100%">
</select>
</div>
現時点では、次のようになっています。これが私が望む方法です。
これが関連しているかどうかはわかりませんが、検索中に生成されたソース コードを参照すると、入力は問題ないように見えますが、ドロップダウンのコードは非表示のようにグレー表示されます。
ここや他の場所で見つけた他の提案に従って、いくつかの異なる解決策を試しました。私は最終的に templateResult と templateSelection がどのように機能するかを知り (特にドキュメントのおかげではありません)、ID も返そうとしましたが、実際には何も選択できないようです。オプション。
これが、返されたオブジェクトが有効であることを確認するためのデバッグを含む、私がまとめたものです。
JS:
// Setup autocomplete/select for User filter
$(".user-list").select2({
ajax: {
url: "[api url]",
type: "GET",
dataType: "json",
data: function (params) {
return {
search: params.term, // search term
page: params.page
};
},
processResults: function (data) {
console.log(JSON.stringify(data));
return {
results: data
};
},
},
escapeMarkup: function (markup) { return markup; },
id: function (data) { return data.Id.toString(); },
minimumInputLength: 1,
templateResult: function (data, page) {
return "(" + data.User + ") " + data.Name;
},
templateSelection: function (data, page) {
return "(" + data.User + ") " + data.Name;
}
})
ID は GUID であり、他に 2 つのフィールドがあります。これを名前とユーザーと呼びます。
データ サンプル:
[
{
"Id":"a1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1",
"Name":"John Johnson",
"User":"A-123"
},
{
"Id":"b2b2b2b2-b2b2-b2b2-b2b2-b2b2b2b2b2b2",
"Name":"Tom Thompson",
"User":"B-456"
}
]
これに関する質問の山に追加するのは嫌いですが、私が見つけたほとんどの結果は、大幅に異なるオプションを備えた古いバージョンのものであり、まだ機能していません.