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