$('#select2').select2({ minimumResultsForSearch: 20, });
<div class="form-control"> <label for="normal" style="color:green">Normal</label> <select id="normal" > <option value="1">Apple</option> <option value="2">Banana</option> <option value="3">Carrot</option> <option value="4">Donut</option> </select> </div> <div class="form-control"> <label for="select2" style="color:red">Select2</label> <select id="select2" > <option value="1">Apple</option> <option value="2">Banana</option> <option value="3">Carrot</option> <option value="4">Donut</option> </select> </div> <div class="form-control"> <label for="select2search" style="color:green">Select2 + Search</label> <select id="select2search" > <option value="1">Apple</option> <option value="2">Banana</option> <option value="3">Carrot</option> <option value="4">Donut</option> </select> </div> <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'> About this question on SO: <a href='https://stackoverflow.com/q/48015431/1366033'> Type to highlight results in Select2 when minimumResultsForSearch is set </a> </div>
.form-control { padding:10px; display:inline-block; } select { width: 100px; border: 1px solid #aaa; border-radius: 4px; height: 28px; }