下拉菜单

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

模板设置

默认情况下，Select2 将在每个数据对象的text属性中显示在结果列表内。可以通过使用templateResult选项下的选项：

的templateResult函数来自定义下拉菜单中的搜索结果外观，该函数应返回一个包含要显示文本的字符串，或一个包含应显示数据的对象（例如 jQuery 对象）。null，这将防止该选项在结果列表中显示。

使用像Handlebars这样的客户端模板引擎来定义模板可能会对您有帮助。

内置转义功能

默认情况下，templateResult返回的字符串被认为只包含文本内容，并会经过escapeMarkup函数处理，从而移除任何 HTML 标记。

如果你需要在结果模板中渲染 HTML，则必须将渲染结果包装在 jQuery 对象中。在这种情况下，结果将被传递，并由 jQuery 直接处理。任何标记（如HTML）都不会被转义，因此防止用户提供的恶意输入是您的责任。jQuery.fn.append and will be handled directly by jQuery. Any markup, such as HTML, will not be escaped and it is up to you to escape any malicious input provided by users.

所有在结果中渲染的内容都是经过模板处理的。这包括诸如“Searching...”（正在搜索）和“Loading more...”（加载更多）这类周期性显示的文本，允许你为这些自动生成的选项添加更高级的格式。你必须确保你的模板函数能够支持它们。

自动选择

通过使用selectOnClose选项下的选项：

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

强制在选择后保持下拉框打开

当选择一个元素时，Select2 将自动关闭下拉菜单，这与普通下拉框的行为类似。你可以使用closeOnSelect选项来防止在选择结果时关闭下拉菜单：

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

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

如果没有使用CloseOnSelect装饰器（或者closeOnSelect设置为false），则在选择结果时不会自动关闭下拉菜单。如果在选择结果时按住ctrl键，则下拉菜单也永远不会关闭。

下拉位置

注意Chosen 迁移用户！如果你是从 Chosen 迁移到 Select2，请注意这个选项将使 Select2 以类似 Chosen 的方式定位下拉菜单。

默认情况下，Select2 会将下拉菜单附加到 body 的末尾，并通过绝对定位使其显示在选择容器的上方或下方。

如果选择容器下方空间不足但上方空间足够，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将导致 DOM 事件在标准 Select2 DOM 容器之外触发。这可能会与第三方组件（如模态窗口）产生冲突。