Question

我正在尝试在包含使用knockout foreach绑定构建的行的表中使用select2（加载远程数据）的自动完成功能。控件不起作用。它似乎是冻结的，而我输入似乎什么也没发生。另外，我在开发人员工具栏中的控制台中找不到任何错误。

我试图将控件放在foreach绑定之外，它完美无缺。

我确实发现我可以使用自定义的敲除绑定，整合淘汰赛和Select2，我在链接https://github.com/select2/select2/wiki/Knockout.js-Integration使用了代码并且它有效。

在我的原始代码中，我没有使用自定义select2 knockout绑定，而是从js文件激活了select2。所以我的HTML就像关注

<input type="text" class="form-control"/>

和JS

$(".form-control").select2({
    minimumInputLength: 3,
    multiple: true,
    allowClear: true,
    ajax: {
        //The url we will send our get request to
        url: dataUrl,
        dataType: 'json',
        quietMillis: 100,
        //Our search term and what page we are on
        data: function (term, page) {
            return {
                pageSize: pageSize,
                pageNum: page,
                limit: -1,
                term: term,
             };
        },
        results: function (data, page) {
            var more = (page * pageSize) < data.Total;
            return { results: data.Results, more: more };
        }
    }
});

有效的示例包含html，包括正常工作的自定义绑定选择。

<pre><select data-bind="options: $parent.clusters, optionsValue: 'id', optionsText: 'Name', optionsCaption: ' ', select2: { placeholder: ' ', allowClear: true }" style="width: 220px"></select></pre>

我想知道以下信息

如何让select2 AutoComplete在我所做的淘汰赛中工作不打算在html页面中定义任何自定义绑定，例如 select2 。
如何确保foreach绑定与select2控件一起正常工作，我假设我们需要告诉select2它应该如何解释foreach绑定，反之亦然。

Answer 1

根据超酷的评论，你可以修改你的控件，以防你想到使用jqAuto插件。

<input type="text" class="form-control" data-bind="value: valueToBindWith, valueUpdate: 'input', jqAuto: { autoFocus: true, delay: 300 }, jqAutoSource: $root.valuescollection, jqAutoQuery: $root.searchValues, jqAutoValue: valueToBindWith, jqAutoSourceLabel: 'text', jqAutoSourceInputValue: 'text', jqAutoSourceValue: 'text'/>

确保根据具体情况将$ root更改为$ parent。

如何在淘汰赛的foreach绑定中进行Select2 Auto Complete工作

1 个答案: