下拉菜单

本章介绍了下拉菜单中结果列表的外观和行为。

模板

默认情况下,Select2将text在结果列表中显示每个数据对象的属性。下拉菜单中搜索结果的外观可以通过使用templateResult选项:



templateResult函数应返回一个包含要显示的文本的字符串,或一个包含应显示的数据的对象(例如jQuery对象)。它还可以返回null,这将阻止该选项显示在结果列表中。

您可能会发现使用客户端模板引擎(如Handlebars)来定义模板会很有帮助。

内置转义

默认情况下,返回的字符串templateResult 假定仅包含文本,并将通过escapeMarkup 函数,剥离所有HTML标记。

如果需要使用结果模板呈现HTML,则必须将呈现的结果包装在jQuery对象中。在这种情况下,结果将直接传递到jQuery.fn.append并将直接由jQuery处理。任何标记(例如HTML)都不会被转义,您有责任逃避用户提供的任何恶意输入。

结果中呈现的所有内容都将作为模板。 其中包括将定期显示的结果,例如“正在搜索…”和“正在加载更多…”文本,这使您可以为这些自动生成的选项添加更多高级格式。您必须确保模板功能可以支持它们。

自动选择

可以将Select2配置为在关闭下拉菜单时自动选择当前突出显示的结果。 selectOnClose 选项:

$('#mySelect2').select2({
  selectOnClose: true
});

选择后强制下拉菜单保持打开状态

选择二将自动关闭,当选择了下拉的元素,类似于与正常的选择框来完成。您可以使用 closeOnSelect 选项,以防止在选择结果时关闭下拉菜单:

$('#mySelect2').select2({
  closeOnSelect: false
});

请注意,此选项仅适用于多选控件。

如果 CloseOnSelect 装饰器未使用(或closeOnSelect 设置为 false),则选择结果后下拉列表不会自动关闭。如果在ctrl选择结果时按住该键,则下拉菜单也永远不会关闭。

下拉位置

注意选择收获的移民!如果要从“Chosen”迁移到“ Select2”,则此选项将导致“ Select2”以类似方式放置下拉列表。

默认情况下,Select2会将下拉列表附加到主体的末端,并将其绝对定位在选择容器的上方或下方。

如果容器下方没有足够的空间,但容器上方有足够的空间,则Select2将在容器上方显示下拉列表。

dropdownParent 选项允许您为下拉列表选择附加元素:

$('#mySelect2').select2({
  dropdownParent: $('#myModal')
});

试在模态和其他小型容器内正确呈现Select2时,这很有用。例如,如果您在使用Bootstrap模式中的搜索框时遇到问题,请尝试设置 dropdownParent 模态元素的选项。

如果要在尚未渲染或打开的模式(Bootstrap 3.x)内部渲染Select2,则可能需要绑定到 shown.bs.modal 事件:

$('body').on('shown.bs.modal', '.modal', function() {
  $(this).find('select').each(function() {
    var dropdownParent = $(document.body);
    if ($(this).parents('.modal.in:first').length !== 0)
      dropdownParent = $(this).parents('.modal.in:first');
    $(this).select2({
      dropdownParent: dropdownParent
      // ...
    });
  });
});

如果在使用默认body附件时遇到定位问题,则使用浏览器控制台检查以下各项的值可能会有所帮助:

  • document.body.style.position
  • $(document.body).offset()

看到这个问题。.

dropdownParent 将导致在标准Select2 DOM容器之外引发DOM事件。这可能会导致第三方组件(例如模式)出现问题。