Select2搜索-仅匹配以搜索项开头的单词

Question

我因为它对我更好，所以从chosen插件迁移到了select2插件，但是与chosen相比，它的文档非常贫乏。有人能告诉我应该使用哪个选项来使select2搜索功能过滤仅以搜索词开头的单词（而不是包含在中间）。

假设select2字段具有以下选项：香蕉、苹果、菠萝。

当用户输入“app”（或apple）时，只应返回apple（因为它是唯一以apple开头的单词）。现在，它返回了apple和pineapple。

经过大量搜索，我发现需要使用一些自定义匹配器，但目前只有这些了。

- Mindaugas Li

Answer 1

Select2 4.0.0

function matchStart(params, data) {
    params.term = params.term || '';
    if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
        return data;
    }
    return false;
}

$("select").select2({
    matcher: function(params, data) {
        return matchStart(params, data);
    },
});

- Arturo Montoya

---

我还建议在data.text上删除空格或使用trim()函数，直到我这样做之前它都不起作用。 - dizad87

Answer 2

Select2提供了一个在文档中使用自定义匹配器函数将搜索词匹配到搜索结果的示例。所提供的示例正是这个用例。

function matchStart (term, text) {
  if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
    return true;
  }
 
  return false;
}
 
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
  $("select").select2({
    matcher: oldMatcher(matchStart)
  })
});

<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.full.js"></script>

<select style="width: 200px">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

- Kevin Brown-Silva

---

谢谢 - 这很有帮助 - 令我困惑的是，你怎么传递额外的配置？我只是为配置设置了一个对象，并在 function(oldMatcher) {...} 中设置了 config.matcher 属性：config.matcher = oldMatcher(matchStart);... 这样说不清楚吗？ - random_user_name

Answer 3

这是针对大数据集优化的匹配函数。其他函数运行缓慢。

function matchStart(params, data) {
    if ($.trim(params.term) === '') {
        return data;
    }
    if (typeof data.text === 'undefined') {
        return null;
    }
    if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
        return data;
    }
    return null;
}  

$("select").select2({
    matcher: function(params, data) {
        return matchStart(params, data);
    }
});

- Matviy

---

为什么这个代码被优化了？它相比其他解决方案有什么更快的地方？请解释一下你的代码。 - Jeremy Caney

这是原始函数，在“indexOf”行中稍作更改。只是尝试了其他解决方案。 - Matviy