Display limited records and load ore records on more button

Dear Team,

I am using Select2 on Asp dropdown control and records dynamically loading but want to display top 3 records but when user do key press for other records it should display that also.

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

.select2-selection {
  -webkit-box-shadow: 0;
  box-shadow: 0;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  color: #555555;
  font-size: 14px;
  outline: 0;
  min-height: 48px;
  text-align: left;

.select2-selection__rendered {
  margin: 10px;

.select2-selection__arrow {
  margin: 10px;


$(function() {
    placeholder: "select option",
    selectOnClose: true
<div style="margin:30px; height:400px;">
  <select id="myselect" style="min-width:300px;">
  <option value='A'>A option thing</option>
  <option value='B'>B option thing</option>
  <option value='C'>C option thing</option>
   <option value='D'>D option thing</option>
  <option value='E'>E option thing</option>
  <option value='F'>F option thing</option>

As per above example only top 3 records should display but on key press of ā€œDā€ records should come and select