javascript - 在 Select2 中获取和缓存结果

Question

我的应用程序使用select2来显示通过 Ajax 调用检索到的名称列表。它使用 select2 ajax 功能。

但问题是，每当我在select2输入上键入时， select2都会获取项目。我不想每次用户输入时都获取。我想在select2的初始加载中获取项目，然后使用相同的数据，即使他们在 select2 输入中输入。

我怎样才能做到这一点？

PS：我在 Ajax 中看到过缓存标志，但我认为它确实会根据 URL 缓存结果。当用户在 select2 输入上键入时，它不会停止获取数据。

Answer 1

Select2 使用带有就地缓存的 ajax 加载数据。

$("#selIUT").select2({
            cacheDataSource: [],
            placeholder: "Please enter the name",
            query: function(query) {
                self = this;
                var key = query.term;
                var cachedData = self.cacheDataSource[key];

                if(cachedData) {
                    query.callback({results: cachedData.result});
                    return;
                } else {
                    $.ajax({
                      url: '/ajax/suggest/',
                      data: { q : query.term },
                      dataType: 'json',
                      type: 'GET',
                      success: function(data) {
                        self.cacheDataSource[key] = data;
                        query.callback({results: data.result});
                      }
                    })
                }
            },
            width: '250px',
            formatResult: formatResult, 
            formatSelection: formatSelection, 
            dropdownCssClass: "bigdrop", 
            escapeMarkup: function (m) { return m; } 
        }); 

我希望你觉得这对你有帮助。

Answer 2

我得到了缓存来处理分页。

query: function (query) {
    var id = this.element[0].id;
    var term = query.term;
    var total = 100;

    if (!window.select2cache[id]) {
        window.select2cache[id] = {};
    }
    if (!window.select2cache[id][term]) {
        window.select2cache[id][term] = {
            results: {
                results: [],
                more: false
            },
            pages: 0
        };
    }


    if (window.select2cache[id][term].pages > 0 && query.page === 1) {
        query.callback(window.select2cache[id][term].results);
    } else {
        var page = window.select2cache[id][term].pages + 1;
        var vars = {
            task: id,
            q: term,
            page: page,
            total: total
        };
        $.get("./autocomplete.php", vars, function (data) {
            var more = (page * total) < data.totalrows;
            window.select2cache[id][term].results.results = window.select2cache[id][term].results.results.concat(data.results);
            window.select2cache[id][term].results.more = more;
            window.select2cache[id][term].pages = page;
            query.callback({results: data.results, more: more});
        }, "json");
    }
}

我使用了，id因此您可以在同一页面上拥有多个 select2 并分别缓存它们。