Javascript yii2中的dropDownList自动完成

在Yii2中，我希望当用户开始键入时，我的一个multiselect字段是自动完成的。我已经加载了所有产品，但它们超过1000个，加载速度非常慢。所以我需要一个下拉列表，让我可以键入一些产品的标题，然后再建议我一个选项列表

 <?php
     $cats = Product::find()->where('active = 1')->all();
     $prArr = array();
     if ($cats) {
       foreach ($cats as $cat) {
          $prArr[$cat->id] = $cat->title;
       }
     }
     $selectedProducts = '';
     if (isset($_POST['RelProducts']) and ! empty($_POST['RelProducts'])) {
         $selectedProducts = array();
         foreach ($_POST['RelProducts'] as $cat) {
               $selectedProducts[$cat] = $cat;
         }
     }
     ?>
     <?= Html::dropDownList('RelProducts[]', $selectedProducts, $prArr, ['multiple' => 'multiple', 'style' => 'width:300px;', 'rows' => 10, 'id' => 'relProductSelect']); ?>

以下是脚本：

$('#relProductSelect').multiSelect({
    selectableHeader: "<a href='#' id='select-all-rel-prod'>Избери всички</a><br /><input type='text' class='search-input' autocomplete='off' placeholder='търси...' style=\"width:100%;margin-bottom:5px;\">",
    selectionHeader: "<a href='#' id='deselect-all-rel-prod'>Премахни всички</a><br /><input type='text' class='search-input' autocomplete='off' placeholder='търси...' style=\"width:100%;margin-bottom:5px;\">",
    afterInit: function (ms) {
        var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

        that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function (e) {
                    if (e.which === 40) {
                        that.$selectableUl.focus();
                        return false;
                    }
                });

        that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function (e) {
                    if (e.which == 40) {
                        that.$selectionUl.focus();
                        return false;
                    }
                });
    },
    afterSelect: function () {
        this.qs1.cache();
        this.qs2.cache();
    },
    afterDeselect: function () {
        this.qs1.cache();
        this.qs2.cache();
    }
});

$（'#relProductSelect'）。多选({
selectableHeader:“
”，
selectionHeader:“
”，
afterInit：函数（ms）{
var=这个，
$selectableSearch=that.$selectableUl.prev（），
$selectionSearch=that.$selectionUl.prev（），
selectableSearchString='#'+that.$container.attr（'id'）+'.ms elem可选：非（.ms selected），
selectionSearchString='#'+that.$container.attr（'id'）+'.ms elem selection.ms selected'；
that.qs1=$selectableSearch.quicksearch（selectableSearchString）
.on（'keydown'，功能（e）{
如果（e.which==40）{
即.$selectableUl.focus（）；
返回false；
}
});
that.qs2=$selectionSearch.quicksearch（selectionSearchString）
.on（'keydown'，功能（e）{
如果（e.which==40）{
那.$selectionUl.focus（）；
返回false；
}
});
},
余选：函数（）{
this.qs1.cache（）；
this.qs2.cache（）；
},
取消选择后：函数（）{
this.qs1.cache（）；
this.qs2.cache（）；
}
});

---

如何加快请求的速度？

需要最少努力的解决方案之一是使用该选项

minimumInputLength

：启动 搜索

只有在搜索词达到一定长度时才开始过滤结果更有效。在你的情况下，它可以创造一个不同

根据您的评论，您正在使用，但尚未添加源代码，而js代码用于jquery muti-select，但我将为您提供用于服务器端实现的代码

Select2::widget([
    'name' => 'my-dropdown',
    'data' => $data,
    'options' => ['placeholder' => 'Select a product ...', 'multiple' => true],
    'pluginOptions' => [
        'allowClear' => true,
        'minimumInputLength':3
    ],
])

您可以根据需要调整输入值。

---

希望它能帮助您。

您目前使用的是哪个multiselect插件我使用Select2小部件这里是一个链接，该版本添加了一个答案，看看是否有帮助。