Search code examples
javascriptjquerydelayjquery-select2

Introducing delay while ajax call in select2 plugin


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

Solution

  • 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