javascript - 如何使 select2 搜索按字母顺序开始？

Question

我在我的文章跟踪应用程序中使用 select2 进行标签搜索，我注意到当您开始输入“m”、“mi”时，您会认为“迁移”会首先突出显示，但它以任何内容开头有“m”，就像形式一样。如图所示，“表单”首先出现，搜索越多，它就会变得非常烦人。

如果您输入“mi”，我希望首先出现以“mi”开头的任何内容，相反，它将包括诸如具有 m 和 i 的“forms-middle”之类的内容。如何根据拼写正确地制作 select2 查找标签？谢谢

由于某种原因，答案不起作用，文档中提供的默认答案也不是:

<select  style="width:90%;" multiple="multiple" id="selected_tags" name="selected_tags">
      {% for tag in tags %}        
          <option value="{{tag.slug}}">{{tag.name}}</option>
      {% endfor %}
  </select>  

....


$(document).ready(function() {
    $("#selected_tags").select2({
        sortResults: function(results, container, query) {
            if (query.term) {
                // use the built in javascript sort function
                return results.sort(function(a, b) {
                    if (a.text.length > b.text.length) {
                        return 1;
                    } else if (a.text.length < b.text.length) {
                        return -1;
                    } else {
                        return 0;
                    }
                });
            }
            return results;
        }
    });
});

Answer 1

您可以对结果进行排序，请检查 documentation here 。根据查询的字符串索引进行排序。您可以在 sort() 中使用 javascript 构建 对结果数组进行排序的方法。

$("#e1").select2({
  sortResults: function(results, container, query) {
    console.log(query);
    if (query.term) {
      // use the built in javascript sort function
      return results.sort(function(a, b) {
        console.log(a.text.indexOf(query),b.text.indexOf(query));
        if (a.text.indexOf(query.term) > b.text.indexOf(query.term)) {
          return 1;
        } else if (a.text.indexOf(query.term) < b.text.indexOf(query.term)) {
          return -1;
        } else {
          return 0;
        }
      });
    }
    return results;
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<select id="e1">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
  <option value="WY">sdsd</option>
  <option value="WY">aasd</option>
  <option value="WY">aaas</option>
  <option value="WY">qwer</option>
  <option value="WY">sqwqw</option>
  <option value="WY">cxncmx</option>
  <option value="WY">snamsnam</option>
</select>