在 Select2 中获取和缓存结果

Posted 2023-05-07

【中文标题】在 Select2 中获取和缓存结果

【英文标题】：Fetching and caching the result in Select2

【发布时间】：2013-06-06 22:16:54

【问题描述】：

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

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

我怎样才能做到这一点？

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

【问题讨论】：

可能更容易将所有可用选项放入 <select> 并使用我所说的非 ajax 版本。

对于它的价值，这里是 select2 答案：github.com/ivaynberg/select2/issues/110

codecraig 评论的更新链接：github.com/select2/select2/issues/110

【参考方案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;  
        ); 

希望对您有所帮助。

【讨论】：

其实需要替换 query.callback(results: data.result);使用 query.callback(results: data);和 query.callback(results: cachedData.result) 和 query.callback(results: cachedData)

coorasse ，我正在添加 data.result 因为我的数据位于“result”变量中。如果您直接在“数据”变量中返回结果，那么您的代码也可以工作。

【参考方案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 并分别缓存它们。