Datalist - limit to dispay only x-amount of options

Question

So I have this html datalist that consists of almost 6000 options, something like the example bellow.

The problem is it opens up A LOT options over your browser and I only require about 10 to be visible at a time and it needs to be a field that auto-completes when you start typing

Is there any way to display only the top 10 options that returns from the list?

for (i = 0; i < 6000; i++) { 
    $('#myList').append("<option value=Example'"+i+"'></option>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input list="myList">

<datalist id="myList">
</datalist>

I found this post from 3 years ago but it is too slow to use on my amount of options. Was hoping someone found a better(faster) solution or at least an alternative solution since.

check this link, its a bug in Chrome browser http://stackoverflow.com/questions/27598876/html5-datalist-wont-dropdown-when-the-sugguest-list-is-large — Sunil Prabakar, Oct 13 '16 at 09:31
Thanks, this seems to be a different problem though. The list does display, I just want to limit the dropdown to only show the first 10suggestions — Ruan Kruger, Oct 13 '16 at 12:24

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

I find another issue in stack overflow which can help you in your case by changing the type of control from input to select:

The original one you find the solution in one of the answers: create dropdown list with scrollbar

for (i = 0; i < 6000; i++) { 
    $('#sel').append("<option value=Example'"+i+"'>Example'"+i+"'</option>");
}

document.getElementById('sel').addEventListener('click', onClickHandler);
document.getElementById('sel').addEventListener('mousedown', onMouseDownHandler);

function onMouseDownHandler(e){
 var el = e.currentTarget;
 
    if(el.hasAttribute('size') && el.getAttribute('size') == '1'){
     e.preventDefault();    
    }
}
function onClickHandler(e) {
  var el = e.currentTarget; 

    if (el.getAttribute('size') == '1') {
        el.className += " selectOpen";
        el.setAttribute('size', '6');
    }
    else {
        el.className = '';
        el.setAttribute('size', '1');
    }
}

select {
    position: absolute;
    z-index: 0;
    width: 200px;
}
.selectOpen {
    z-index:9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel" size = "1">
</select>

edited May 23 '17 at 12:03

Community

1
1

answered Oct 13 '16 at 10:02

mbadeveloper

1,272
9
16

@Ruan Kruger I tried to go around the issue by replacing the input control with select – mbadeveloper Oct 13 '16 at 10:03
Thanks for the reply, but the problem is you need to type the start of a word and select the correct option from the list. A 'select' doesn't provide the option to type a word. – Ruan Kruger Oct 13 '16 at 12:22
I tried to set the events and styles to the input control but I cannot to get it work by moment – mbadeveloper Oct 13 '16 at 12:25
You can use autocomplete from jQuery user interface instead, may be this will help :) https://jqueryui.com/autocomplete/ – mbadeveloper Oct 13 '16 at 13:22

score 0 · Answer 2 · answered Oct 14 '16 at 06:38

0

I managed to find a workaround with the chosen plugin. Works great and is available on bower and npm for easy access.

answered Oct 14 '16 at 06:38

Ruan Kruger

33
1
7

Datalist - limit to dispay only x-amount of options

2 Answers2