如何将复杂样式应用于 Select2 组件的选择？

Question

今天在使用Select2插件的时候，遇到了一个看似简单的造型任务，但是看起来我想要实现的东西比我想象的要难。这是我想做的：

用户应该能够从下拉菜单中选择联系人。每个联系人条目都应显示为联系人的个人资料图片和旁边的一些数据。折叠时，下拉列表应显示所选联系人（即所选联系人的个人资料图片和旁边的一些数据），旁边有一个“下拉三角形”。在展开状态下，下拉菜单应另外显示其他联系人，每个联系人都有个人资料图片和数据。简而言之，我想按照the select2 example page 上的“模板”示例中所述进行模板化，只是布局更复杂（左侧的个人资料图片加上图片旁边的三个堆叠的文本行）。

我通过使用formatResult select2 选项，使用将图像和数据包装在样式化的 div 元素中的格式函数，设法将所需的样式应用于 results（请注意，我使用 Twitter Bootstrap 的用于样式的“媒体”css 类）：

function formatContactResult(item) {
 if(!item.id)
    return "No contact selected";

 var contact = JSON.parse(item.text);
 return "<div class='media'><a class='pull-left' href='#'><img style='margin-top: 5px;' class='media-object' data-src='holder.js/64x64' src='" + contact.thumbUrl + "' /></a><div class='media-body' style='font-size: 11px;'><strong>" + contact.displayName + "</strong><br />" + contact.jobTitle + "</div></div>"
};

我的问题：我不知道如何将这样的复杂布局应用于选择。我知道formatSelection 选项，但formatSelection 函数的返回值被包装在span 元素中，该元素不适用于复杂布局。虽然我知道它无效，但我尝试应用我上面提到的相同布局函数，但预期会导致奇怪的结果（所需的布局被推到右边很远）。

有人知道如何使用 select2 实现所描述的布局吗？

如果有任何兴趣，我正在使用带有 Knockout.js 和 Twitter Bootstrap 的 Select2 插件。

Answer 1

我想通了——问题是select2-choice 组件中包含的所有div 元素都绝对定位在select2.css 中并设置样式：

.select2-container .select2-choice div {
    display: block;
    width: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    [...]
}

该样式用于渲染下拉框的“下拉三角形”，恰好是一个div元素。不幸的是，三角形div 没有自己的 CSS 类名，应该使用它来设置样式。

因此，作为一种解决方法，我创建了一个新的 CSS 类并将其应用于我想在 select2-choice 组件内呈现的 div 元素。这个想法是覆盖位置和宽度属性：

.innerDiv {
    position: relative !important; 
    width: auto !important;
}