Introducing delay while ajax call in select2 plugin

delay, javascript, jquery, jquery-select2

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

Problem

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

Original source