Imagine the delay when calling ajax in select2 module

Question

I am using select 2 examples from http://ivaynberg.imtqy.com/select2/ I am using the “Download Remote Data” example on this page.

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

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

("#e6").select2({ placeholder: "Search for a movie", minimumInputLength: 1, ajax: { // instead of writing the function to execute the request we use Select2 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 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 }); 

Answer 1

The answer to your question is given in the actual example that you pointed out to us:

 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 quietMillis to something more, as the documentation says:

quietMillis - the number of milliseconds to wait for a user to stop typing before issuing an ajax request

Answer 2

I believe that the quietMillis property has been delayed in newer versions of select2:

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

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

Answer 3

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

This definitely solves your problem. debounce will delay its execution until it waits for milliseconds. You can find more information in underscores

Answer 4

You can use the setTimeout function:

 var timer; ... initSelection: function(element, callback) { clearTimeout(timer); var id=$(element).val(); timer = setTimeout(function() { if (id!=="") { $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", { data: { apikey: "ju6z9mjyajq2djue3gbvv26t" }, dataType: "jsonp" }).done(function(data) { callback(data); }); } }, 1000); },