在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 并单独缓存它们。