Select2：如何将自定义样式添加到下拉菜单中不存在的选项？

Question

我正在使用select2。我已经让用户选择了不匹配的关键字。只是想知道有人输入的内容并不匹配，你如何设置不匹配的下拉项目以显示不同的风格？我想把它弄清楚，或者使它变成斜体或其他东西。

下面是一个例子，第一个下拉项目与下拉列表中的任何其他内容都不匹配：

我正在使用Angular，但我也很高兴有jQuery解决方案的人也可以回答。我可以为Angular提供它。

Answer 1

您将需要使用formatResult选项，并使用select2的markMatch内部函数设置结果样式以保留下划线功能（请参阅https://groups.google.com/forum/#!topic/select2/FhVygJ_21Nk）

这是我用来设置用户输入样式的代码示例，而不是与查询的标记列表不匹配。我还包括了标签使用次数的计数

...
    formatResult: function(result, container, query, escapeMarkup) {
            var markup=[];
            window.Select2.util.markMatch(result.text, query.term, markup, escapeMarkup);
            if (result.isNew) {

                return markup.join("");
            } else {
                return '<span class="post-tag">'+markup.join("")+'</span><span class="item-multiplier">×&nbsp;'+result.count+'</span>';
            }

        },
...

我上面的例子

<style>
.item-multiplier {
font-size: 90%;
font-weight: normal;
margin-right: 4px;
color: #999;
}
.post-tag, .post-text .post-tag, .wmd-preview a.post-tag {

padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
position: relative;
text-decoration: none;
font-size: 100%;
line-height: 1.4;
white-space: nowrap;
color: #333;
cursor: default;
border: 1px solid #aaaaaa;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #e4e4e4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}


.select2-results .select2-highlighted {
    background: #fff0d9;
    color: #000;
}

.select2-result-selectable .select2-match, .select2-result-unselectable .select2-match {

font-weight: bold;
}
</style>