how to delay select-2, so that it waits for some time after user types in data

Question

I know that the above can be achieved by using quietMillis in the AJAX call, but I am using query to cache the data. And it is here I am not able to delay the AJAX call. Below is the code

$('#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
            })
        }
    }

});

Is there any work around to delay the AJAX call so that the AJAX call is not fired for every keystroke?? The reason for using "query" is for caching, which is not achieved just by setting cache to true in the AJAX call.

Answer 1

According to the select2 documentation, you can do this easily.

A request is being triggered on every key stroke, can I delay this?

By default, Select2 will trigger a new AJAX request whenever the user changes their search term. You can set a time limit for debouncing requests using the ajax.delay option.

This will tell Select2 to wait 250 milliseconds before sending the request out to your API.

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