使 Select2 只获取一次数据

Posted 2023-05-07

【中文标题】使 Select2 只获取一次数据

【英文标题】：Make Select2 fetch data only once

【发布时间】：2017-06-09 06:07:07

【问题描述】：

我正在使用 Select2 内置 AJAX 来加载一个很小的项目列表。 Select2 会在第一次选择时加载整个列表（很好），但每次用户尝试更改其选择或类型以过滤项目时都会重新加载 JSON 提要（这意味着对每个输入的字母都有一个新的 AJAX 请求！）。

A request is being triggered on every key stroke, can I delay this? 我们可以阅读：

默认情况下，Select2 将触发一个新的 AJAX 请求，只要用户 更改他们的搜索词。您可以设置去抖动的时间限制 使用 ajax.delay 选项的请求。

$('select').select2(
    ajax: 
        url: '/example/api',
        delay: 250
    
);

这将告诉 Select2 在将请求发送到您的 API 之前等待 250 毫秒。

...但事实并非如此。严重地。我还尝试了示例中显示的未记录的 minimumInputLength 属性，但它似乎没有任何作用。

是否甚至可以让 Select2 只获取一次数据？

【问题讨论】：

我想这个库不是为那样工作而设计的。

【参考方案1】：

每次用户更改她/他的输入时，select2 ajax 参数都会触发 ajax 调用。如果您只想加载一次列表，只需在加载页面时通过正常的 ajax 调用加载它，并将结果设置为 select2 的 data 属性，如下所示：

var dataList;

$.ajax(
   url : '/example/api',
   success : function(data) 
      dataList = data;
   ,
   async : false
);

$('select').select2(
   data: dataList
);

【参考方案2】：

它对我有用。我使用很大的延迟对其进行了测试：delay: 3000 AJAX 请求确实在最后一次击键后延迟了 3 秒。 它也适用于使用退格键删除字符时。 我正在使用 select2.full.js v4.0.3。希望这会有所帮助。

【参考方案3】：

让我知道此解决方案是否适合您：

1) 将 onChange 操作绑定到您的选择元素：

        <select name="variable" onChange="loadyourlist($('option:selected',this).val());">
            <option value="#">Select State</option>
            <option value="1">State 1</option>
        </select>

2) 在 loadyourlist 函数中发出请求，但检查之前是否已调用过它：

        window.called = 0; //initial state

        function loadyourlist(value)
            if(!window.called)  //not called before
                //make your ajax call
                window.called = 1; //increment to avoid furter calls