Introducing delay while ajax call in select2 plugin

Question

I am using select 2 example from http://ivaynberg.github.io/select2/ I am using "Loading Remote Data" example in this page.

Problem: As soon as I type a letter, system makes an ajax call. I want to introduce delay of 1 second during this request which will allow the user to type his search string.

I am adding code from the site. Please let me know how to introduce delay.

("#e6").select2({
            placeholder: "Search for a movie",
            minimumInputLength: 1,
            ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
                url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
                dataType: 'jsonp',
                data: function (term, page) {
                    return {
                        q: term, // search term
                        page_limit: 10,
                        apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
                    };
                },
                results: function (data, page) { // parse the results into the format expected by Select2.
                    // since we are using custom formatting functions we do not need to alter remote JSON data
                    return {results: data.movies};
                }
            },
            initSelection: function(element, callback) {
                // the input tag has a value attribute preloaded that points to a preselected movie's id
                // this function resolves that id attribute to an object that select2 can render
                // using its formatResult renderer - that way the movie name is shown preselected
                var id=$(element).val();
                if (id!=="") {
                    $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", {
                        data: {
                            apikey: "ju6z9mjyajq2djue3gbvv26t"
                        },
                        dataType: "jsonp"
                    }).done(function(data) { callback(data); });
                }
            },
            formatResult: movieFormatResult, // omitted for brevity, see the source of this page
            formatSelection: movieFormatSelection,  // omitted for brevity, see the source of this page
            dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
            escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
        });

Barmecidal

Instead of adding a delay can't you check the number of characters entered by the user ? ex: check weather user has entered more than 3 characters before sending the request ? – Betts

Answer 1

The answer to your question is in the actual example you've pointed us to:

ajax: {
    url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
    dataType: 'jsonp',
    quietMillis: 100, // <----------- HERE change it to 1000
    data: function (term, page) {
        return {
            q: term, //search term
            page_limit: 10,
            page: page,
            apikey: "ju6z9mjyajq2djue3gbvv26"
        };
    },
    results: function (data, page) {
        var more = (page * 10) < data.total;
        return {results: data.movies, more: more};
    }
},

just change the quietMillis to something bigger, as the documentation says:

quietMillis - Number of milliseconds to wait for the user to stop typing before issuing the ajax request

Rejection

talsibony's answer is working now. quietMillis is not working new versions – Abib

Agreed this appears to be version specific. quietMillis is respected, but delay is not in select2 3.5.2. – Mctyre

Answer 2

I guess quietMillis property was changed to delay in newer versions of select2:

https://select2.org/data-sources/ajax#rate-limiting-requests

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

Dispread

This is the currently correct answer, and I have presumed to add the correct link to the documentation. Not sure why this important configuration is not clearly documented... in the regular documentation of configuration. – Hoffarth

Answer 3

Using a utility tool like underscore.js gives you the ability to use some cool features, like debounce!

This exactly solves your problem. debounce will postpone its execution until wait milliseconds. You can find more info at the underscore docs

Principally

true, but you can't really get into the select2 internals to use that here. – Overturn