Input Delay

Use the inputDelay option via JavaScript or data-input-delay in HTML to decide when to trigger the Event Listener for the modal search for debounce functionality.

If you are using a complete and ready to use predefined and rendered <select> with all <option> elements possible and do not rely on AJAX/FETCH or async/await inside the customSearch option, it is best to set the inputDelay = 0 to archive the maximum user experience by having no debounce and create interactions as smooth as possible!

Possible options to search for are: Banana, Apple, Orange, Lemon, Pepper, Mushrooms, Cabbages, Celery, Brocoli, Garlic

<div class="container">
    <select multiple="multiple" data-toggle="better-nice-select" data-input-delay="0">
        <option value="Banana">Banana</option>
        <option value="Apple">Apple</option>
        <option value="Orange">Orange</option>
        <option value="Lemon" selected="selected">Lemon</option>
        <option value="Pepper">Pepper</option>
        <option value="Mushrooms">Mushrooms</option>
        <option value="Cabbages">Cabbages</option>
        <option value="Celery">Celery</option>
        <option value="Garlic">Garlic</option>
        <option value="Brocoli">Brocoli</option>
    </select>
</div>

let elements = document.querySelectorAll('[data-toggle="better-nice-select"]');
elements.forEach(element => new betterNiceSelect.BetterNiceSelect(element));