如何在淘汰赛的 foreach 绑定中使 Select2 自动完成工作答案

【问题标题】：How to make a Select2 Auto Complete work inside foreach binding of knockout如何在淘汰赛的 foreach 绑定中使 Select2 自动完成工作
【发布时间】：2015-02-23 12:09:49
【问题描述】：

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

我试图将控件放在 foreach 绑定之外，并且效果很好。

我确实发现我可以使用自定义敲除绑定、敲除和 Select2 的集成使其工作，我使用链接 https://github.com/select2/select2/wiki/Knockout.js-Integration 处的代码并且它有效。

在我的原始代码中，我没有使用自定义 select2 敲除绑定，而是从 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，包括正确工作的自定义绑定 select2。

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

我想了解以下信息

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

【问题讨论】：

如果自动完成功能不工作，如果你保持在一个 foreach 中，说 $(".form-control").select2 无法识别，因为 foreach 下的元素是在 DOM 创建之后创建的。最好的选择是使用 jqAuto 插件，它就像一个魅力，否则你应该尝试使用 delegates(register events) 。欢呼
谢谢，您能否描述更多有关委托（注册事件）的信息，您的意思是在 Select2 中更改时注册事件处理程序吗？

标签： javascript asp.net knockout.js

【解决方案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 视情况而定。

【讨论】：