Additional info below the main text on select option - html

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>

Answer 2

I would use Bootstrap-select. It's a great library and already does every thing you want. No need to reinvent the wheel as they say!
You can search on both the title and description right out the box too.
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-group ">
<label>Minimal</label>
<select class="selectpicker form-control" data-live-search="true" title="Search title or description...">
<option data-subtext="description 1">Alaska</option>
<option data-subtext="description 2">California</option>
<option data-subtext="description 3">Delaware</option>
<option data-subtext="description 4">Tennessee</option>
<option data-subtext="description 5">Texas</option>
<option data-subtext="description 6">Washington</option>
</select>
</div>
</div>
</div>
</div>
CSS
.dropdown-menu > li > a {
font-weight: 700;
padding: 10px 20px;
}
.bootstrap-select.btn-group .dropdown-menu li small {
display: block;
padding: 6px 0 0 0;
font-weight: 100;
}
Here is a fiddle with a little bit of customisation