bootstrap-combobox не работает с полосой фильтра

Question

Я создал панель фильтров, которая заполнена локальными данными JSON (Категории).Я пытался преобразовать его в bootstrap-combobox, но я не смог этого сделать - в консоли я вижу ошибку (...).combobox is not a function.Я не могу сказать, является ли ошибка A. Как я импортирую combobox в мой файл JS, и / или B. Если мой combobox() неуместен.Я полагаю, что я правильно импортировал файлы JS и CSS в выпадающем списке.Есть мысли?

PS - Вот мой файл webpack.config.js .

index.js:

import "./styles.css";
import 'jquery-autocomplete/jquery.autocomplete.css';
import './SiteAssets/plugins/jquery-ui.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import './SiteAssets/plugins/bootstrap-combobox.css';

import 'jquery';

import 'bootstrap/dist/js/bootstrap.bundle';
require('bootstrap-combobox/js/bootstrap-combobox.min.js')

.js file:

import testjson from './test.json';
import $ from 'jquery';
import combobox from 'bootstrap-combobox'; // "val is declared but never read"

export default class {
    constructor() {
    }

loadAllCourses() {
        let allCrs = testjson.d.results
            .sort((a,b) => {
                return (a.Category > b.Category) ? 1 : ((b.Category > a.Category) ? -1 : 0)
            })
            .filter((el, idx, self) => { // no duplicates
                return (idx === self.map(el => el.Category).indexOf(el.Category))
            })
            .map(x => {
                return {
                    "Category": x.Category,
                    "Description": x.Description,
                    "Title": x.Title,
                    "Link": x.VideoLink
                }
            });

        let newArr = allCrs
            .map(x => {
                return x.Category;
            }).concat(allCrs
            .map(x => {
                return x.Title;                
            }));

        let curIndex = 0;
        $.each(allCrs, function(idx, val) {
            $("#combobox")
            .append("<option><div data-toggle='modal' data-target='#modal-id'>" + val.Category + "</div></option>")      

            $(document).ready(function(){ // --- if doc.ready-etc isn't here only the first Category appears in the filter bar
                $("#combobox").combobox(); // --- is this in the right spot?
            });

            ///// other code /////

        })

        $('.categoryName').click(function(val) {
            /// clicking on modal

            //////

            $(".training-titles-ul").empty();
            let titles = testjson.d.results.filter(x => x.Category === cat);

            $.each(titles, function(idx, val) {
                let url = val.VideoLink;
                    $('a').attr('href', url)
                    $(".training-titles-ul")
                        .append("<li>" + "<span class='triangle-right'>&blacktriangleright;</span>" +  "<a href=" + url + " target='_blank'>" + val.Title + "</a>" + "</li>")
            })

        });

    } // ------------------ loadAllCourses

}

Фрагмент HTML:

  <!-- Search form -->
  <div class="ui-widget">
    <!-- <input type="text"> -->
    <select id="combobox">
      <option value="def">&#x1F50E&nbsp;Search A/LA Training Library</option>
    </select>
  </div>