select2 search - 只匹配以搜索词开头的词

Posted 2023-05-07

【中文标题】select2 search - 只匹配以搜索词开头的词

【英文标题】：select2 search - match only words that start with search term

【发布时间】：2015-10-12 20:15:14

【问题描述】：

我从 selected 迁移到 select2 插件，因为它对我来说效果更好，但与 selected 相比，它的文档非常差。谁能告诉我应该使用什么选项来制作 select2 搜索功能来过滤仅以搜索词开头的单词（并且不包含在中间）。

假设 select2 字段有这些选项：香蕉、苹果、菠萝。

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

经过大量搜索，我发现需要使用一些自定义匹配器，但仅此而已。

【参考方案1】：

选择2 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);
    ,
);

【讨论】：

我还建议删除 data.text 上的空格或 trim()，在我这样做之前它对我不起作用。

【参考方案2】：

Select2 提供了an example in the documentation，说明如何使用自定义matcher 函数将搜索词与搜索结果进行匹配。给出的例子就是这个确切的用例。

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>

【讨论】：

谢谢-这很有帮助-让我困惑的是-您/您将如何/可以传递其他配置？我只是为配置设置了一个对象，并在function(oldMatcher) ... 中设置config.matcher 属性：config.matcher = oldMatcher(matchStart);.... 这有意义吗？