Select2: how to add custom styling to the option that doesn't exist in the dropdown?

Question

I am using select2. I've enabled users to select keywords that doesn't match. Just wondering when someone does type something that doesn't match, how do you style the dropdown item that's not matching to show a different style? I would like to gray it out or make it italic or something.

Heres an example, the 1st dropdown item doesn't match anything else in the dropdown:

I'm using Angular, but I'm happy for anyone with jQuery solutions to answer as well. I can appropriate it for Angular.

Answer 1

you will want to use the formatResult option, along with styling the result using the markMatch internal function of select2 to retain underline function (see https://groups.google.com/forum/#!topic/select2/FhVygJ_21Nk )

This is an example of code i did to style user input than did not match the queried list of tags. I also included the count of the number of times the tag was used

...
    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 for my above example

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