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

Answer 2

Select2 (4.0.3) has an undocumented option: minimumInputLength

This option will prompt the user to fill in the minimum number of characters and then fire the selection

Answer 3

I found a way to delay the triggering. I've used an implementation of debounce function in underscore.js . The code would now look like this

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

Hope it helps someone.