Question

在Yii2中，我希望我的多选字段之一在用户开始输入时自动完成。我已加载所有产品，但它们超过1000并且加载非常慢。所以我需要一个下拉列表，允许我在它向我推荐选项列表之前输入一些产品标题。

$('#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();
    }
});

这是脚本：

{{1}}

如何快速请求？

Answer 1

其中一个需要最少努力的解决方案可能是使用选项

minimumInputLength：启动a所需的最少字符数搜索范围。

仅当搜索项是特定长度时才开始过滤结果更有效。在您的情况下，它可以创造差异。

根据你的评论，你使用的是KartikSelect2-multiselect，但你还没有为它添加源代码，而js代码用于jquery多选 - 但是我会为你提供服务器端的代码实施

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

您可以根据需要调整输入值。希望它可以帮助你。

dropIownList在yii2中自动完成

1 个答案: