This package has been deprecated in favor of better-nice-select. Please consider migrating to better-nice-select for continued support and updates: https://www.npmjs.com/package/better-nice-select

Overlay

The methods .bootstrapNiceSelect('open') and .bootstrapNiceSelect('close') can be used to manual trigger events to open or close the overlay with the search container like the following:

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

<div class="container">
    <div class="d-flex justify-content-start align-items-center m-4">
        <button type="button" class="btn btn-outline-primary me-2" id="select-overlay-open">open</button>
        <button type="button" class="btn btn-outline-primary ms-2" id="select-overlay-close">close</button>
    </div>
    <select multiple="multiple" id="select-overlay">
        <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 select = bootstrapNiceSelect.BootstrapNiceSelect("#select-overlay");

document.querySelector("#select-overlay-open").addEventListener("click", function () {
    select.bootstrapNiceSelect("open", "A");
});

document.querySelector("#select-overlay-close").addEventListener("click", function () {
    select.bootstrapNiceSelect("close");
});