Question

我正在使用http://ivaynberg.github.io/select2/中的精选2示例我在此页面中使用“加载远程数据”示例。

问题：一旦我输入一个字母，系统就会进行ajax调用。我想在此请求期间引入1秒的延迟，这将允许用户键入他的搜索字符串。

我正在从网站添加代码。请让我知道如何引入延迟。

("#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
        });

Answer 1

您的问题的答案在于您指出的实际示例：

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

只需将quietMillis更改为更大的内容，如文档所述：

quietMillis - 在发出ajax请求之前等待用户停止输入的毫秒数

Answer 2

我认为quietMillis属性已更改为在较新版本的select2中延迟：

https://select2.github.io/options.html#a-request-is-being-triggered-on-every-key-stroke-can-i-delay-th

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

Answer 3

使用像underscore.js这样的实用工具，您可以使用一些很酷的功能，例如debounce！

这完全解决了你的问题。 debounce将推迟执行，直到等待毫秒。您可以找到更多信息at the underscore docs

Answer 4

您可以使用setTimeout函数：

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

在select2插件中调用ajax时引入延迟

4 个答案: