Display limited records and load ore records on more button

Development
#1

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.

#2 
<html>
<head>
<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>

<style>
.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;
}

</style>

<script>
$(function() {
  $('#myselect').select2({
    placeholder: "select option",
    selectOnClose: true
  });
});
</script>
</head>
<body>
<div style="margin:30px; height:400px;">
  <select id="myselect" style="min-width:300px;">
  <option></option>
  <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>
</select>
</div>
</body>
</html>

As per above example only top 3 records should display but on key press of “D” records should come and select