使用jQuery Searchable Select插件时如何提高性能（初始化大量选择时速度非常慢）

我正在使用jQuery可搜索选择插件

如果我在一个页面上有一个小的选择数，但我有一个大的选择数（一个页面上可以有几百个选择数），那么这个方法很好用。当我初始化插件（通过类或循环ID）时，需要很长时间（约10秒）并消耗所有系统资源

当我运行设置代码时，我会遇到问题，例如：

$(document).ready(function() {
   $("select").searchable();
});

我的选择实际上是相同的，重复了很多次。我尝试过用一个select初始化（这要快得多），然后复制然后再复制（通过HTML和jQuery clone（）），但是复制的实例不可搜索

$(document).ready(function() {
    var clone_src = $('#originalSelectUser');
    $(clone_src).searchable({        });
    $(".dest").each(function(i) {
        $(clone_src).clone(true).attr('id', 'clone'+i).appendTo('#enddiv');
    });  
});

---

是否有任何方法可以减少初始化大量插件或重复选择插件所需的时间？

调用clone时是否将数据和事件作为true传递？我想。克隆（真的）应该有用。确保在要克隆的选定项可搜索后进行克隆

$(document).ready(function() {
    var clone_src = $('#originalSelectUser');
    $(clone_src).searchable({        });
    $(".dest").each(function(i) {
        $(clone_src).clone(true).attr('id', 'clone'+i).appendTo('#enddiv');
    });  
});

---

另一个想法可能是把你需要的两个都隐藏起来。然后，当一个选择被聚焦时，用一个匹配的隐藏选择的克隆交换它。如果克隆不工作，您可能需要在克隆后使用.searchable（）调用对其进行初始化，但您不必这样做。

调用克隆时是否将数据和事件作为true传递？我想。克隆（真的）应该有用。确保在要克隆的选定项可搜索后进行克隆

$(document).ready(function() {
    var clone_src = $('#originalSelectUser');
    $(clone_src).searchable({        });
    $(".dest").each(function(i) {
        $(clone_src).clone(true).attr('id', 'clone'+i).appendTo('#enddiv');
    });  
});

---

---

另一个想法可能是把你需要的两个都隐藏起来。然后，当一个选择被聚焦时，用一个匹配的隐藏选择的克隆交换它。如果克隆不起作用，您可能需要在克隆后使用.searchable（）调用对其进行初始化，但您不必这样做。

我建议您编写自己的javascript，而不是在性能敏感的情况下编写jquery方法。尽管它需要花费更多的时间，但你可以控制一切，并且可以编写一个针对特定情况进行优化的代码。我的问题是——为什么你在一个页面上有这么多选择？我想说你可能有一个UI问题。你有什么方法可以改变你的网站的工作方式吗？网站是一个活动表，下拉列表是活动的所有者（允许重新分配）-因此决定进行大量选择是经过深思熟虑的（因为我们允许用户在一个页面上拥有所有项目，如果他们愿意，并过滤到他们想要的内容）.我理解自己编写的要点-但是我们刚刚进行了原型设计，所以我们试图找到一个很好的跨浏览器解决方案，我们可以快速实现-显然，如果我们无法对其进行优化，我们将不得不这样做。我建议您编写自己的javascript，而不是在性能敏感的情况下编写jquery方法。尽管它需要花费更多的时间，但你可以控制一切，并且可以编写一个针对特定情况进行优化的代码。我的问题是——为什么你在一个页面上有这么多选择？我想说你可能有一个UI问题。你有什么方法可以改变你的网站的工作方式吗？网站是一个活动表，下拉列表是活动的所有者（允许重新分配）-因此决定进行大量选择是经过深思熟虑的（因为我们允许用户在一个页面上拥有所有项目，如果他们愿意，并过滤到他们想要的内容）。我理解编写您自己的解决方案的意义-但是我们刚刚进行了原型设计，所以我们试图找到一个很好的跨浏览器解决方案，我们可以快速实施-显然，如果我们无法对其进行优化，我们将不得不这样做。我没有尝试使用数据和事件（我会尝试，看看它是如何运行的）。谢谢，谢谢。使用withDataAndEvents确实可以克隆整个对象，但是它仍然引用原始位置，因此可以跳回到原始位置-例如，请参见此处：了解如何更新引用吗？当您克隆具有ID的对象时，您需要更改克隆的ID，否则会出现错误/冲突。请看这里：我的固定示例。谢谢-但这不太管用。问题是我不仅克隆了select，还克隆了与之相关的事件——不幸的是，这正是我的知识让我失望的地方，因为我不知道这些是如何工作的。您将从第一个JSFIDLE（上面）中看到，然后当您单击克隆的项目时，将为第一个项目生成搜索框（有趣的是，如果我只是移动它，而不克隆它，它就可以正常工作）。如果您在更新ID时选中此处，它仍然不起作用-您将在发布的示例中看到，克隆的搜索框不可搜索我已修复了一个输入错误，但由于某种原因它没有保存。这是一个打字错误已经纠正的版本。我还没有尝试使用DataandEvents（我会尝试一下，看看它是如何运行的）。谢谢，谢谢。使用withDataAndEvents确实可以克隆整个对象，但是它仍然引用原始位置，因此可以跳回到原始位置-例如，请参见此处：了解如何更新引用吗？当您克隆具有ID的对象时，您需要更改克隆的ID，否则会出现错误/冲突。请看这里：我的固定示例。谢谢-但这不太管用。问题是我不仅克隆了select，还克隆了与之相关的事件——不幸的是，这正是我的知识让我失望的地方，因为我不知道这些是如何工作的。您将从第一个JSFIDLE（上面）中看到，然后当您单击克隆的项目时，将为第一个项目生成搜索框（有趣的是，如果我只是移动它，而不克隆它，它就可以正常工作）。如果您在更新ID时选中此处，它仍然不起作用-您将在发布的示例中看到，克隆的搜索框不可搜索我已修复了一个输入错误，但由于某种原因它没有保存。这是一个打字错误已经纠正的版本。