设置值时，语义 UI 下拉列表滞后于整个 ui答案

【问题标题】：Semantic UI dropdown lags entire ui when setting values设置值时，语义 UI 下拉列表滞后于整个 ui
【发布时间】：2016-07-19 00:50:06
【问题描述】：

我有一个 包含大约 1500 项的大型选择。每当我调用此代码时

$('#multi-select').dropdown('set exactly', ['my value']);

要设置其值，整个 UI 会锁定并滞后。现在我知道这是由于下拉列表很大（1500 个项目），但我想知道是否有办法保留这么多项目而不会将用户体验冲入马桶。

我在下面整理了一个示例。您可以尝试单击按钮一次，或连续多次单击以查看浏览器阻塞。

http://jsfiddle.net/qhy9do4w/1/

【问题讨论】：

标签： javascript jquery user-interface semantic-ui dropdown

【解决方案1】：

我们的解决方案是简单地缓存内容，只将选定的选项子集放入下拉列表本身。

【讨论】：

【解决方案2】：

我查看了代码并分析了点击。在其内部的某个地方，语义触发了很多事件，并且大部分延迟时间都被 module.trigger 占用了。里面的代码是这样的：

trigger: {
  change: function() {
    var
      events       = document.createEvent('HTMLEvents'),
      inputElement = $input[0]
    ;
    if(inputElement) {
      module.verbose('Triggering native change event');
      events.initEvent('change', true, false);
      inputElement.dispatchEvent(events);
    }
  }
}

我没有看到任何禁用事件处理部分的方法。

【讨论】：

【解决方案3】：

我仔细查看了下拉设置的语义.js 代码，这确实很重要：https://github.com/Semantic-Org/Semantic-UI/blob/74fea12e1fd548cb870872ba5ed59f5acdcc57ba/dist/components/dropdown.js#L2219:L2295

您可以尝试计算代码是否缓慢，或者您是否可以使用任何快捷方式。

但是，这很难，您可能需要考虑像 search 这样的替代方案。

【讨论】：

我必须能够选择多个值。我不确定您是否可以使用包含多个值的搜索
当然可以，只需使用onSelect 回调将值添加到列表中，可能作为复选框，任何适合您的方式。
不，我的意思是语义 ui 多值功能，就像在示例中一样。单击下拉菜单，然后单击多个值。
我理解你，onSelect 会允许你这样做。您在搜索字段中输入，选择一个，它会添加到列表中，然后您输入下一个，选择并添加它。确实是标签等大型列表的最佳解决方案。