javascript - Select2 - 按查询排序结果

Question

我使用的是 Select2 版本 4.0.0。

如果我的结果包含多个词，并且用户输入其中一个词，我 想要显示按输入的单词在结果中的位置排序的结果。

比如用户输入“apple”，我的结果是:

1. “香蕉橙苹果”
2. “香蕉苹果橙”
3. “苹果香蕉橘子”

那么“apple banana orange”应该首先出现在 select2 结果列表中，因为这是结果中“apple”最早出现的结果。我不太关心过去的顺序。

我要重写或配置什么才能得到这样的东西？似乎 matcher 没有 处理排序，sorter 不包含查询数据。

Answer 1

您可以通过使用 select2-search__field 类标识 Select2 生成的输入框的值来获取搜索查询。这可能会跨越版本，但由于它们不提供 Hook 来获取查询，因此需要某种黑客攻击。你可以 submit an issue让他们添加对在排序期间访问查询的支持，特别是因为它看起来在 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>