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

Question

我有一个大的选择，里面大约有1500个项目。每当我调用这个代码时

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

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

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

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

Answer 1

我已经查看了代码并分析了点击。Semantic在其内部的某个地方引发了许多事件，而大部分滞后时间都被模块占用了。触发了一些东西。代码内部如下所示：

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);
    }
  }
}

我看不出有任何方法可以禁用事件处理部分。

Answer 2

我仔细研究了下拉集的semantic.js代码，它相当不错：https://github.com/Semantic-Org/Semantic-UI/blob/74fea12e1fd548cb870872ba5ed59f5acdcc57ba/dist/components/dropdown.js#L2219:L2295

你可以试着弄清楚代码是否很慢，或者你是否可以做任何快捷方式。

但是，这很难，你可能会想一个像搜索一样的化身。

Answer 3

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