Customize input type=”text” datalist to show only last 10 saved values

Photo by RealToughCandy.com on Pexels.com
When there is a long list of values in the datalist, they will all get displayed with a scroll bar.
Requirement
Apply limit to html textbox datalist to display only x-amount of options. In other words, show last 10 saved values on textbox click but search through the whole list as the user begins typing in the input.
Textbox click
Searching through the list
<div>
Please select: <input type="text" id="Text1" list="A">
</div>
<datalist id="A">
<option value="None">
<option value="1">
<option value="2">
<option value="3">
<option value="4">
<option value="5">
<option value="6">
<option value="11">
<option value="22">
<option value="33">
<option value="44">
<option value="55">
<option value="66">
</datalist>
<datalist id="B">
<option value="66">
<option value="55">
<option value="44">
<option value="33">
<option value="22">
</datalist>
Solution
Since list does not provide much options. Trick is to have two data lists and swap on keyup and mousedown
<script>
var search = document.getElementById('Text1');
search.addEventListener('keyup', function handler(event) {
document.getElementById('Text1').setAttribute('list', "A");
});
search.addEventListener('mousedown', function handler(event) {
document.getElementById('Text1').setAttribute('list', "B");
});
</script>