11

私は Select2 を 2 年間使用しており、すべての開発を本当に楽しんでいます。しかし、バージョン 3.5.x には限界があるので、バージョン 4.0 に移行します。

記録として、私は Select2 を大きなテーブル (> 10.000 エントリ) で使用しているため、AJAX と無限のデータ (ページは 50 項目に設定) を使用しています。

  1. バージョン 3.5.2 では、データを検索するときに下線の一致を再現できます (formatSelectionとを使用query.term)。バージョン 4.0.0 でそれを作成する方法はありますか (関数はパスするtemplateResultだけで、もうパスresultしませqueryんか?

  2. バージョン 3.x では、検索値がリストにありませんでした (を使用createSearchChoice) を使用して、無料のエントリを追加できます。バージョン 4.0 にはこのオプションがありません。再度作成する方法はありますか?

  3. 選択バーを入力バーに置き換えようとしています (まだ選択ドロップダウンを使用しています)。アダプターを強制することは可能のようですが、その方法を見つけることができませんでした。

  4. 新しいアイテムを追加するには、行 (行 1) またはボタン (右にフローティング) のいずれかを追加する必要があります (に似てcreateTagいますが、アイテムの場合)。誰かがすでにそれを作っていますか？

4

2 に答える 2

21

Select2 3.5.2 から Select2 4.0.0 に移行する際は、リリース ノートと4.0 のリリース通知を読むことを強くお勧めします。

バージョン 3.5.2 では、データを検索するときに下線の一致を再現できます (formatSelection と query.term を使用)。v4.0.0 でそれを作成する方法 (関数 templateResult は「結果」のみを渡し、「クエリ」は渡さない) ?

結果がクエリから分離されたため、これは 4.0 で削除されたため、情報を渡し続ける意味がありませんでした。もちろん、これはクエリを取得して保存できないという意味ではありません。あなたがする必要があるのは、クエリを保存することだけです。次のようなものがうまくいくかもしれません

var query = {};
var $element = $('#my-happy-select');

function markMatch (text, term) {
  // Find where the match is
  var match = text.toUpperCase().indexOf(term.toUpperCase());

  var $result = $('<span></span>');

  // If there is no match, move on
  if (match < 0) {
    return $result.text(text);
  }

  // Put in whatever text is before the match
  $result.text(text.substring(0, match));

  // Mark the match
  var $match = $('<span class="select2-rendered__match"></span>');
  $match.text(text.substring(match, match + term.length));

  // Append the matching text
  $result.append($match);

  // Put in whatever is after the match
  $result.append(text.substring(match + term.length));

  return $result;
}

$element.select2({
  templateResult: function (item) {
    // No need to template the searching text
    if (item.loading) {
      return item.text;
    }

    var term = query.term || '';
    var $result = markMatch(item.text, term);

    return $result;
  },
  language: {
    searching: function (params) {
      // Intercept the query as it is happening
      query = params;

      // Change this to be appropriate for your application
      return 'Searching…';
    }
  }
});

バージョン 3.x では、(createSearchChoice を使用して) リストにない検索値を使用して、無料のエントリを追加できます。V4.0 にはこのオプションがありません。再度作成する方法はありますか?

これは、4.0 でもtagsオプション ( に設定true) を使用して行うことができます。タグをカスタマイズしたい場合は、createTag( と同様createSearchChoice) を使用できます。

var $element = $('#my-happy-select');

$element.select2({
  createTag: function (query) {
    return {
      id: query.term,
      text: query.term,
      tag: true
    }
  },
  tags: true
});
于 2015-03-12T19:06:11.543 に答える