Question

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

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

我怎样才能实现这个目标？

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

Answer 1

使用带有缓存的ajax选择2加载数据。

$("#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并单独缓存它们。

在Select2中获取并缓存结果

2 个答案: