Please add a feature to limit visible select list options

[yaddly]

Hi, thank you for this indispensable or requisite select plugin. It is the most functional plugin on the internet I could find that actually works and supports bootstrap dark and light mode themes.

I have a few ideas below to make this plugin more customizable.

1. May you please consider adding a feature that limits the size of visible select list options. Currently the size attribute is not respected and all options are visible.

2. May you please consider adding a feature that allows hiding the dropdown options from being visible unless they match the first 2 or 3 characters of what the user is typing. This will give users a true feel and behaviour that one gets when using google searching engine.

3. May you please consider horizontal scrolling behaviour especially when the select element has a lot of options to display or show, they occupy less space compared to vertical scrolling.

4. May you consider allowing the initialization of multiple select elements using the array syntax e.g. new UseBootstrapSelect([...]) to avoid having to loop through matching elements as below.

const initializeElements = () => {
    const elements = document.querySelectorAll(".form-select");
    selects = Array.from(
        elements,
        (element) => new UseBootstrapSelect(element)
    );
};

5. May you please consider allowing the clearing of multiple select elements using the array syntax and a static method e.g. UseBootstrapSelect.clearValues([...]) to avoid keeping references to initialized select elements and using a loop to clear elements.

const clearSelectValues = () => {
    selects.forEach((select) => select.clearValue());
};

[erwinheldy]

Hi,

Thank you for your feedback and suggestions! We appreciate your effort to help improve the plugin. Here are the responses to your ideas:

1. The feature you mentioned could potentially be handled with the maxHeight option.
2. After testing, I found that even Google displays results when only one character is input.
3. You can customize the dropdown menu style yourself using CSS, as this plugin utilizes Bootstrap dropdown. For example, you can use the selector .use-bootstrap-select > .dropdown-menu > div.
4. The feature you suggested would introduce breaking changes, so it might be considered for the next major version.
5. Yes, this feature would be very useful, for example, in "resetting forms". I have already added it in version 2.2.0

[adaniello]

@erwinheldy I'm agree. Only for 1st point i suggest this improvement: if maxHeight isn't in length units but only integer (eg. "10"), you'ld use this param to set the max number of dropdown-item to show in dropdown-menu, calculating corresponding length in px.