Question

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

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

默认情况下，只要用户，Select2就会触发新的AJAX请求改变他们的搜索词。您可以设置去抖动的时间限制请求使用Sub test() With ActiveSheet .Range("B13").Name = "jobno" .Range("D13").Name = "bldgno" .Range("F13").Name = "phaseno" .Range("D15").Name = "project" .Range("D16").Name = "Client" .Range("J15").Name = "location" .Range("K12").Name = "PhaseWt" .Range("K13").Name = "PhaseArea" End With Call FormatRowsAndSum(1, 10) End Sub选项。
ajax.delay
这将告诉Select2在将请求发送到您的API之前等待250毫秒。

......但它没有。认真。我还尝试了示例中显示的无证$('select').select2({ ajax: { url: '/example/api', delay: 250 } });属性，但它似乎没有做任何事情。

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

Answer 1

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

Answer 2

请告诉我此解决方案是否适合您：

1）将onChange动作绑定到select元素：

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

Answer 3

select2 ajax参数在用户每次更改其输入时都会取消ajax调用。如果只想加载一次列表，只需在页面加载时通过普通的ajax调用加载它，然后将结果设置为select2的data属性，如下所示：

var dataList;

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

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

使Select2仅获取一次数据

3 个答案: