Select2 vs Select

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<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>

CSS

.form-control {
  padding:10px;
  display:inline-block;
}
select {
  width: 100px;
  border: 1px solid #aaa;
  border-radius: 4px;
  height: 28px;
}

JavaScript

$('#select2').select2({
  minimumResultsForSearch: 20,
});