bootstrap-combobox不适用于过滤器栏

Question

我创建了一个过滤器栏，其中填充了本地JSON数据（类别）。我试图将其转换为bootstrap-combobox，但未能成功-在控制台中，我看到错误(...).combobox is not a function。我无法确定错误是否是A。如何将组合框导入到JS文件中，和/或B。如果我的combobox()放错了位置。我相信我已将combobox的JS和CSS文件正确导入了index.js。有什么想法吗？

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文件：

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>