Additional info below the main text on select option

Question

I used select2 to produce my select option list like the snippet below.

$(function(){
    $(".select2").select2();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/>

<div class="form-group">
    <label>Minimal</label>
    <select class="form-control select2" style="width: 100%;">
        <option selected="selected">Alabama</option>
        <option>Alaska</option>
        <option>California</option>
        <option>Delaware</option>
        <option>Tennessee</option>
        <option>Texas</option>
        <option>Washington</option>
    </select>
</div>
       
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

What I want is, a subtext below the main text that searchable too. when i want to search the option with value Alabama, I just need to type Okay1, but in the other hand I want to search with value Alabama only. Are there any plugins other than select2 option library that support this kind of behavior ? ( Below is the image that i expected for the result )

I have tried like the code below, but it didn't work that well :

<div class="form-group">
    <label>Minimal</label>
    <select class="form-control select2" style="width: 100%;">
        <option selected="selected">Alabama&nbsp&nbsp<h4 style="color: grey">Okay1</h4></option>
        <option>Alaska&nbsp&nbsp<h4 style="color: grey">Okay2</h4></option>
        <option>California&nbsp&nbsp<h4 style="color: grey">Okay2</h4></option>
        <option>Delaware&nbsp&nbsp<h4 style="color: grey">Okay3</h4></option>
        <option>Tennessee&nbsp&nbsp<h4 style="color: grey">Okay4</h4></option>
        <option>Texas&nbsp&nbsp<h4 style="color: grey">Okay5</h4></option>
        <option>Washington&nbsp&nbsp<h4 style="color: grey">Okay6</h4></option>
    </select>
</div>

Answer 1

You could:

• encode the secondary property as an attribute of the <option> element
• use a custom search function, see matchCustom in snippet below
• use a custom formatter function, see formatCustom below

Working example, using state mottos as secondary attribute stored in data-foo, you can search by state name or motto:

$(function(){
    $(".select2").select2({
        matcher: matchCustom,
        templateResult: formatCustom
    });
})

function stringMatch(term, candidate) {
    return candidate && candidate.toLowerCase().indexOf(term.toLowerCase()) >= 0;
}

function matchCustom(params, data) {
    // If there are no search terms, return all of the data
    if ($.trim(params.term) === '') {
        return data;
    }
    // Do not display the item if there is no 'text' property
    if (typeof data.text === 'undefined') {
        return null;
    }
    // Match text of option
    if (stringMatch(params.term, data.text)) {
        return data;
    }
    // Match attribute "data-foo" of option
    if (stringMatch(params.term, $(data.element).attr('data-foo'))) {
        return data;
    }
    // Return `null` if the term should not be displayed
    return null;
}

function formatCustom(state) {
    return $(
        '<div><div>' + state.text + '</div><div class="foo">'
            + $(state.element).attr('data-foo')
            + '</div></div>'
    );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/>
<style>
.foo { color: #808080; text-size: smaller; }
</style>

<div class="form-group">
    <label>Minimal</label>
    <select class="form-control select2" style="width: 100%;">
        <option selected="selected" data-foo="We dare to defend our rights">Alabama</option>
        <option data-foo="North to the Future">Alaska</option>
        <option data-foo="Eureka">California</option>
        <option data-foo="Liberty and Independence">Delaware</option>
        <option data-foo="Agriculture and Commerce">Tennessee</option>
        <option data-foo="Friendship">Texas</option>
        <option data-foo="Bye and bye">Washington</option>
    </select>
</div>
       
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>