16

Select2 バージョン 4.0.0 を使用しています。

結果に複数の単語が含まれていて、ユーザーがそれらの単語の 1 つを入力した場合、入力された単語が結果内のどこにあるかによって並べ替えられた結果を表示したいと考えています。

たとえば、ユーザーが「apple」と入力すると、結果は次のようになります。

  1. 「バナナオレンジアップル」
  2. 「バナナアップルオレンジ」
  3. 「アップルバナナオレンジ」

次に、select2 の結果のリストの最初に「apple バナナ オレンジ」が表示されます。これは、「apple」が結果内で最初に表示される結果であるためです。それ以降の注文はあまり気にしません。

このようなものを取得するには、何をオーバーライドまたは構成しますか? matcher注文を処理してsorterおらず、クエリ データが含まれていないようです。

4

3 に答える 3

14

select2-search__fieldクラスで識別することにより、Select2 によって生成された入力ボックスの値から検索クエリを取得できます。これはおそらくバージョン間で壊れるでしょうが、クエリを取得するためのフックが提供されていないため、何らかのハックが必要になります。特にSelect2 3.5.2で可能だったように見えるため、並べ替え中にクエリにアクセスするためのサポートを追加するように問題を送信できます。

$('#fruit').select2({
  width: '200px',
  sorter: function(results) {
    var query = $('.select2-search__field').val().toLowerCase();
    return results.sort(function(a, b) {
      return a.text.toLowerCase().indexOf(query) -
        b.text.toLowerCase().indexOf(query);
    });
  }
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />

<select id="fruit">
  <option>Banana Orange Apple</option>
  <option>Banana Apple Orange</option>
  <option>Apple Banana Orange</option>
  <option>Achocha Apple Apricot</option>
  <option>Durian Mango Papaya</option>
  <option>Papaya</option>
  <option>Tomato Papaya</option>
  <option>Durian Tomato Papaya</option>
</select>

于 2015-08-19T17:54:36.797 に答える
9

ここでの問題は、4.0.0 リリースの Select2 が、結果の照会と結果の表示を分離していたことです。このためsorter、結果を並べ替えるために通常使用するオプションは、作成されたクエリ (検索語を含む) には渡されません。

したがって、ソート時に使用できるように、作成されたクエリをキャッシュする方法を見つける必要があります。results の検索語に下線を引くことに関する私の回答では、テンプレート メソッドを使用してクエリをキャッシュしますloading。これは、検索が行われるたびに常にトリガーされます。ここでも同じ方法が使えます。

var query = {};

$element.select2({
  language: {
    searching: function (params) {
      // Intercept the query as it is happening
      query = params;

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

sorterこれで、保存されたquery(およびquery.term検索語として使用する)を使用するカスタム メソッドを構築できます。私の例の並べ替え方法では、検索結果が結果を並べ替えるテキスト内の位置を使用しています。これはおそらくあなたが探しているものと似ていますが、これはかなり強引な方法です。

function sortBySearchTerm (results) {
  // Don't alter the results being passed in, make a copy
  var sorted = results.slice(0);

  // Array.sort is an in-place sort
  sorted.sort(function (first, second) {
    query.term = query.term || "";

    var firstPosition = first.text.toUpperCase().indexOf(
      query.term.toUpperCase()
    );
    var secondPosition = second.text.toUpperCase().indexOf(
      query.term.toUpperCase()
    );

    return firstPosition - secondPosition;
  });

  return sorted;
};

そして、これにより、あなたが探している方法で物事が並べ替えられます。以下に、すべてのパーツを接続した完全な例を示します。質問で言及した 3 つのオプション例を使用しています。

var query = {};
var $element = $('select');

function sortBySearchTerm (results) {
  // Don't alter the results being passed in, make a copy
  var sorted = results.slice(0);
  
  // Array.sort is an in-place sort
  sorted.sort(function (first, second) {
    query.term = query.term || "";

    var firstPosition = first.text.toUpperCase().indexOf(
      query.term.toUpperCase()
    );
    var secondPosition = second.text.toUpperCase().indexOf(
      query.term.toUpperCase()
    );
    
    return firstPosition - secondPosition;
  });
  
  return sorted;
};

$element.select2({
  sorter: sortBySearchTerm,
  language: {
    searching: function (params) {
      // Intercept the query as it is happening
      query = params;

      // Change this to be appropriate for your application
      return 'Searching…';
    }
  }
});
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select style="width: 50%">
  <option>banana orange apple</option>
  <option>banana apple orange</option>
  <option>apple banana orange</option>
</select>

于 2015-08-19T22:40:32.770 に答える