Search Data

Use searchData option via JavaScript or data-search-data via attribute to load the select field data. For predefined <option> tags, you need to add them in HTML. If data is already added, it will be silently skipped and nothing will happen. You can use the name of a function to set the option or a callback function.

<div class="container">
    <select id="my-select" multiple="multiple">
        <option value="Apple" selected="selected">Apple</option>
    </select>
</div>
let remoteSearchData = {
    items: [
        {
          id: "Banana",
          text: "Banana",
          optGroup: "Fruit"
        },
        {
          id: "Apple",
          text: "Apple",
          optGroup: "Fruit"
        },
        {
          id: "Orange",
          text: "Orange",
          optGroup: "Fruit"
        },
        {
          id: "Pepper",
          text: "Pepper",
          optGroup: "Vegetable"
        },
        {
          id: "Garlic",
          text: "Garlic",
          optGroup: "Vegetable"
        }
    ]
}

function callRemoteData(filter) {
    filter = filter.toUpperCase();
    // put AJAX or Fetch for Remote JSON object here
    let toRet = structuredClone(remoteSearchData);
    toRet.items = toRet.items.filter(data => data.text.toUpperCase().indexOf(filter) > -1);
    return toRet;
}

let select = bootstrapNiceSelect.BootstrapNiceSelect("#my-select", {searchData: 'callRemoteData'});