搜索

搜索框会自动添加到下拉列表的顶部,用于选择框,其中只能选择一个选项。可以使用Select2轻松自定义搜索框的行为和外观。

自定义结果的匹配方式

当用户通过在搜索框中输入搜索词来过滤结果时,Select2使用内部“匹配器”将搜索词与结果匹配。您可以通过指定以下内容的回调来自定义Select2与搜索字词匹配的方式:matcher 配置选项。

Select2将把由其内部表示形式表示的每个选项传递到此回调中,以确定是否应显示它:

function matchCustom(params, data) {
    // 如果没有搜索词,则返回所有数据
    if ($.trim(params.term) === '') {
      return data;
    }

    // 不显示项目,如果没有“文本”属性
    if (typeof data.text === 'undefined') {
      return null;
    }

    // `params.term` 应该是用来搜索的术语吗
    // `data.text` 是为数据对象显示的文本吗
    if (data.text.indexOf(params.term) > -1) {
      var modifiedData = $.extend({}, data, true);
      modifiedData.text += ' (matched)';

      // 您可以从这里返回修改后的对象
	  //这包括匹配你想在嵌套数据集中的“children”
      return modifiedData;
    }

    // 如果不应该显示术语,则返回' null '
    return null;
}

$(".js-example-matcher").select2({
  matcher: matchCustom
});

matcher 仅使用本地提供的数据(例如,通过数组!)使用远程数据集时,Select2期望返回的结果已在服务器端被过滤。

匹配分组选项

仅第一级对象将传递到matcher打回来。如果您使用的是嵌套数据,则必须遍历children 排列并分别匹配它们。这样可以在处理嵌套对象时进行更高级的匹配,从而使您可以随意处理它们。

此示例仅在术语出现在字符串开头时才匹配结果:



一个兼容性模块存在使用V3风格匹配的回调。

最小搜索词长

有时,当处理大型数据集时,仅当搜索词达到一定长度时才开始对结果进行过滤更为有效。在使用远程数据集时,这非常常见,因为它仅允许使用重要的搜索词。

您可以使用minimumInputLength 选项:

$('select').select2({
  minimumInputLength: 3 // 只有当用户输入3个或更多字符时才开始搜索
});

最大搜索词长

在某些情况下,搜索词需要限制在一定范围内。Select2允许您限制搜索词的长度,以使其不超过特定长度。

您可以使用来限制搜索字词的最大长度 maximumInputLength 选项:

$('select').select2({
    maximumInputLength: 20 // 只允许术语长度不超过20个字符
});

将搜索框的显示限制为大型结果集

minimumResultsForSearch 选项确定下拉菜单的初始填充中显示搜索框所需的最少结果数。

对于使用本地数据和较小结果集的情况,此选项很有用,而搜索框只会浪费屏幕空间。将此值设置为-1以永久隐藏搜索框。

$('select').select2({
    minimumResultsForSearch: 20 // 至少20个结果必须显示
});

隐藏搜索框

单选

对于单选,Select2允许您使用minimumResultsForSearch 配置选项。在此示例中,我们使用值 Infinity 告诉Select2从不显示搜索框。



多选

对于多选框,没有明显的搜索控件。因此,要禁用对多选框的搜索,您需要设置 disabled 每当下拉列表打开或关闭时,将属性设置为true:



有关此解决方案的来源,请参见此问题。