select2でのAJAXによるタグ付け
2023-08-15 18:32:21
質問
でタグ付けしているのですが セレクト2
select2でこんな要件があります。
- 私はselect2 ajaxを使用していくつかのタグを検索する必要があります。
- また、私はリスト(Ajaxの結果)にない値を可能にするselect2で"tags"を使用する必要があります。
両方のシナリオは独立して動作します。しかし、一緒に結合されたaJaxの値は、入力されるだけです。リストにない他の値を入力すると、"no matches found"と表示されます。
私のシナリオ ユーザーがリストにない新しい値を入力した場合、ユーザーが独自のタグを作成することを許可します。
これを動作させる方法はありますか?
どのように解決するのですか?
Select2には、"createSearchChoice"という関数があります。
ユーザーの検索語から新しい選択可能な選択肢を作成します。許可する クエリ機能で利用できない選択肢を作成することができます。以下のような場合に便利です。 例えば「タグ付け」のように、ユーザがその場で選択肢を作成できる場合。
を使うことで、欲しいものを実現することができます。
createSearchChoice:function(term, data) {
if ($(data).filter(function() {
return this.text.localeCompare(term)===0;
}).length===0) {
return {id:term, text:term};
}
},
multiple: true
以下は、ajax検索にJSONの結果を返し、用語が結果を返さなかった場合に、用語からタグを作成することを可能にする、より完全な回答です。
$(".select2").select2({
tags: true,
tokenSeparators: [",", " "],
createSearchChoice: function(term, data) {
if ($(data).filter(function() {
return this.text.localeCompare(term) === 0;
}).length === 0) {
return {
id: term,
text: term
};
}
},
multiple: true,
ajax: {
url: '/path/to/results.json',
dataType: "json",
data: function(term, page) {
return {
q: term
};
},
results: function(data, page) {
return {
results: data
};
}
}
});
関連
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] jQueryで現在のURLを取得する?
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] jQueryの$という記号の意味は何ですか?
最新
-
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。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] ECMAScriptとは?
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法