Select2 Sections

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<select class='select'>
    <optgroup label="Cross Site Request Forgery (CSRF)">
        <option value='missing'>CSRF Protection Missing</option>
        <option value='incorrect-handling'>Incorrect type handling</option>
    </optgroup>
    <optgroup label='Cross Site Scripting (XSS)'>
        <option value='persistent'>Persistent XSS</option>
        <option vlaue='reflected'>Non-Persistent XSS</option>
    </optgroup>
</select>

CSS

body {
    font-family: Helvetica;
    padding: 50px;
}
.select2-container {
    width: 10%;
}

JavaScript

$('.select:visible').select2({
    matcher: function(term, text, opt){
         return text.toUpperCase().indexOf(term.toUpperCase())>=0 || opt.parent("optgroup").attr("label").toUpperCase().indexOf(term.toUpperCase())>=0
    }
});