[解決済み] AjaxリクエストでSelect2をJSONで使用するには?
2022-11-26 02:16:08
質問
私の 選択2 3.4.5では、JSONデータで動作しません。
以下はHTML上の入力ボックスです。
<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />
...そして私のJavaScript
$(".itemSearch").select2({
placeholder: "Search for an Item",
minimumInputLength: 2,
ajax: {
url: "/api/productSearch",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return {
option: term
};
},
results: function (data, page) {
var more = (page * 10) < data.total;
return {
results: data.itemName,
more: more
};
}
},
formatResult: function (data, term) {
return data;
},
formatSelection: function (data) {
return data;
},
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) {
return m;
}
});
Laravel4で、テキストボックスに何か入力するたびに値を返すAPIを作りました。
テキストボックスに"test"と入力すると、以下のような結果が得られます。
[{"itemName":"Test item no. 1","id":5},
{"itemName":"Test item no. 2","id":6},
{"itemName":"Test item no. 3","id":7},
{"itemName":"Test item no. 4","id":8},
{"itemName":"Test item no. 5","id":9},
{"itemName":"Test item no. 6","id":10},
{"itemName":"Test item no. 7","id":11}]
Select2のドロップダウンに結果を追加できない。私は思う
formatSelection
と
formatResult
は、どのようなパラメータを配置する必要があるのか分からないため、問題を引き起こしています。コンテナ、オブジェクト、クエリなどのパラメータと、それが返すべき値をどこで取得すればよいのかわかりませんし、私のJSONレスポンスが間違っているのでしょうか?
どのように解決するのですか?
以下に例を示します。
$("#profiles-thread").select2({
minimumInputLength: 2,
tags: [],
ajax: {
url: URL,
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function (term) {
return {
term: term
};
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.completeName,
slug: item.slug,
id: item.id
}
})
};
}
}
});
とても簡単です。
関連
-
[解決済み] cURLでJSONデータをPOSTするにはどうすればよいですか?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる
-
[解決済み] これは純関数ですか?
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?