在 select2 聚焦和空闲时更新它的内容

Posted 2023-05-07

【中文标题】在 select2 聚焦和空闲时更新它的内容

【英文标题】：Update select2 contents while it is focused and idle

【发布时间】：2016-09-22 04:48:44

【问题描述】：

我正在使用以下代码将数据动态加载到 select2（2.5.3 版）小部件中。

var arr = [];
$.ajax(...); // Load data into the array

hiddenInput.select2(
    data:  results: arr 
);

如果我专注于小部件的搜索字段，则仅在以下情况下才会显示新数据：

我点击离开，然后再次聚焦 我开始在字段中输入内容

调用hiddenInput.val() 不会执行任何操作，调用hiddenInput.change() 或hiddenInput.trigger('change.select2') 会关闭下拉菜单并删除任何输入的文本。

如何在不要求用户执行任何操作且不重置小部件状态（例如，不关闭和清除搜索字段）的情况下更新数据？

【问题讨论】：

您到底想达到什么目的？为什么需要这样做？为什么用户有焦点时数据会发生变化？

@Miro 我正在使用 ajax 调用加载一些数据。此加载可能需要一两秒钟 - 发生这种情况时，“未找到匹配项”文本将显示为“正在加载”。用户可以在加载完成之前访问搜索框，以便他们可以尽快开始搜索。如果他们点击搜索字段但没有输入任何内容，结果框将继续显示“正在加载”，尽管数据已经加载。我希望 select2 小部件能够识别这一点并相应地更新显示。

是的。我明白了。但是为什么你必须在用户集中注意力之后而不是之前加载数据呢？这样它就不必在用户集中注意力时更新。示例：jsfiddle.net/mirohristov/h2trn161/2

@Miro 我无法加载我没有的数据？我会在页面加载后立即进行 ajax 调用——不是在用户关注该字段之后——但这仍然需要时间。

我明白了。好吧，在这种情况下，您最好的选择是使用初始请求加载数据（作为带有 的 html）。否则，您可以在加载 ajax 时将 disabled 属性添加到选择中。这就是我会做的。文本清除的原因是因为“change.select2”重建了整个内容。

【参考方案1】：

我找到了一个临时解决方案，可以让小部件反映数据已更改。它基本上只是模拟在搜索字段中输入内容的行为。

var searchField = hiddenInput.data("select2").search;
if (searchField.is(":focus")) 
    var searchTerm = searchField.val();
    hiddenInput.select2("search", "");
    hiddenInput.select2("search", searchTerm);

这似乎不是一个非常“干净”的解决方法，所以我会推迟接受它作为最终解决方案，直到出现更合适的解决方案。