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>';
            }

        },
...

我上面例子的css

<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>