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

【问题标题】：How can I improve performance when using jQuery Searchable Select plugin (it is very slow when initialising a large number of selects)使用 jQuery Searchable Select 插件时如何提高性能（初始化大量选择时非常慢）
【发布时间】：2013-04-22 13:03:44
【问题描述】：

我正在使用 jQuery 可搜索选择插件http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/forms-controls/searchabledropdown/index.html

如果我在一个页面上有少量选择但我有很多选择（一页上可以有几个 100），这很好用。当我初始化插件（通过类或循环通过 ID）时，它需要很长时间（约 10 秒）并消耗所有系统资源。

当我运行设置代码时出现问题，例如：

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

我的选择实际上是相同的两个重复多次。我尝试使用一个选择进行初始化（这要快得多）并复制然后复制它（通过 HTML 和 jQuery clone()），但是复制的实例不可搜索。

是否有办法减少为大数字或重复选择初始化插件所需的时间？

【问题讨论】：

我建议在性能敏感的情况下编写自己的 javascript 而不是 jquery 方法。尽管它会消耗更多时间，但您可以控制一切，并且可以编写针对特定情况进行优化的代码。
我的问题是 - 为什么你在一页上有这么多的选择？我会说你可能有一个 UI 问题。有什么方法可以改变您网站的工作方式？
该站点是一个活动表，下拉列表是活动的所有者（允许重新分配） - 所以有很多选择的决定是经过深思熟虑的（因为我们允许用户拥有所有如果他们愿意，可以将项目放在一页上，然后过滤到他们想要的内容）。
我理解自己编写的重点——但是我们现在只是在进行原型设计，所以我们正在尝试找到一个可以快速实施的不错的跨浏览器解决方案——显然如果我们无法对其进行调整我们必须走那条路。

标签： jquery performance jquery-plugins drop-down-menu searchable

【解决方案1】：

在调用克隆时，您是否将 withDataAndEvents 传递为 true？我认为 .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() 调用对其进行初始化，但您不必这样做。

【讨论】：

我没有尝试过 withDataAndEvents（我会试试看效果如何）。谢谢
嗨 - 谢谢。使用 withDataAndEvents 确实克隆了整个东西，但是它仍然引用原始位置，所以跳回到原来的位置 - 例如见这里：jsfiddle.net/XdjRx 知道如何更新引用吗？
当您使用 ID 克隆某些内容时，您需要更改克隆的 ID，否则您会遇到错误/冲突。请参阅此处：jsfiddle.net/nathanlounds/6bMWr/1 我的固定示例。
谢谢，但这不太行。问题是我不只是克隆选择，我也在克隆与之相关的事件——不幸的是，这就是我的知识让我失望的地方，因为我不确定这些是如何工作的。您将从第一个 JSfiddle（上图）中看到，然后当您单击克隆的项目时，会为第一个生成搜索框（有趣的是，如果我只是移动它而不克隆它可以正常工作）。如果您在这里检查-即使更新 ID 它仍然不起作用-jsfiddle.net/XdjRx/2 您将在您发布的示例中看到克隆的搜索框不可搜索
我修正了一个错字，但由于某种原因没有保存。这是一个修正了错字的版本。 jsfiddle.net/6bMWr/5