1. ホーム
  2. javascript

select2でのAJAXによるタグ付け

2023-08-15 18:32:21

質問

でタグ付けしているのですが セレクト2

select2でこんな要件があります。

  1. 私はselect2 ajaxを使用していくつかのタグを検索する必要があります。
  2. また、私はリスト(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
      };
    }
  }
});