Is there a way to implement show more in an Input select element?-CodePudding

I have an input select element in Bootstrap like so :

<div >
    <label for="exampleSelect">Example select</label>
    <select  id="exampleSelect">
    </select>
</div>

where the options are dynamically added (JQuery), the problem is that chances are the options could be of a very high number maybe 10000 options. My question is, is it possible to make a portion of the options hidden until the user asks for them ?

Thanks.

CodePudding user response：

This could be done with the help of size attribute, as per specs:

this attribute represents the number of rows in the list that should be visible at one time.

Here is an example of how this works:

<script type="module">
  import { insert } from '//cdn.jsdelivr.net/npm/karyon/karyon.js';


  const options = [...Array(10000)].map((n, i) =>
      ({is: 'option', content: `option: ${i}`}));
  const select = {
      is: 'select', content: options, attrs: {size: 8}
  };

  insert(select, document.body);
</script>

CodePudding user response：

My suggestion from the comments would mean something like this (based on n--`s answer for generating the select field.)

It shows only the first ten options by default, and after you click the button, and open the select again, it will show all of them.

(Of course that is still not very fun to work with, from a user perspective ...)

select.limited option:nth-child(n 11) {
  display: none;
}

<script type="module">
  import { insert } from '//cdn.jsdelivr.net/npm/karyon/karyon.js';


  const options = [...Array(10000)].map((n, i) =>
      ({is: 'option', content: `option: ${i}`}));
  const select = {
      is: 'select', content: options, attrs: {class: "limited"}
  };

  insert(select, document.body);
</script>
<script>
  function showAll() {
    document.querySelector('select').classList.remove('limited');
  }
</script>

<button onclick="showAll()">Show all</button>