如何延迟select-2，使其在用户键入数据后等待一段时间

Question

我知道上述操作可以通过在AJAX调用中使用quietMillis来实现，但我使用query来缓存数据。正是在这里，我不能延迟AJAX调用。下面是代码

$('#AssetType').select2({
    cacheDataSource: [],
    placeholder: ' ',
    quietMillis: 3000,
    query: function q(query) {
        self = this;
        var key = query.term;
        var cacheData = self.cacheDataSource[key];
        if (cacheData) {
            query.callback({
                results: $.map(cacheData, function (item) {
                    return {
                        text: item.LongDescription,
                        id: item.AssetTypeID
                    }
                })
            });
            return;
        }
        else {
            $.ajax({
                url: 'http://localhost:52377/api/reference/asset/types/' + key,
                dataType: 'json',
                type: 'GET',
                quietMillis: 3000,
                //data: function (query) {
                //    return { assetType: query.term, };
                //},
                success: function (data) {
                    self.cacheDataSource[key] = data;
                    query.callback({
                        results: $.map(data, function (item) {
                            return {
                                text: item.LongDescription,
                                id: item.AssetTypeID
                            }
                        })
                    });
                },
                cache: true
            })
        }
    }

});

有没有办法延迟AJAX调用，这样就不会在每次击键时都触发AJAX调用？？使用"query“的原因是缓存，这不是通过在AJAX调用中将cache设置为true来实现的。

Answer 1

根据select2 documentation的说法，你可以很容易地做到这一点。

每次击键都会触发一个请求，我可以延迟吗？

默认情况下，每当用户更改其搜索词时，Select2都会触发一个新的AJAX请求。您可以使用ajax.delay选项设置解除请求的时间限制。

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

​

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

​

Answer 2

我找到了一种延迟触发的方法。我在underscore.js中使用了一个去抖动函数的实现。代码现在将如下所示

query: debounce(function q(query) {..
.....
}, 350),

希望这能帮助到别人。

Answer 3

Select2 (4.0.3)有一个未记录的选项: minimumInputLength

此选项将提示用户填写最小字符数，然后触发选择