缓存自动完成 JSON 响应

Question

让浏览器缓存 JSON API 诸如自动完成之类的响应是否有任何特殊的技巧或要求？

我们有一个表格，其中包含建筑物名称
大约有 1500 个建筑物名称，因此我们不想不必要地下载所有这些
我们在输入至少两个字符后发送一个 API 查询，例如至 api.website.com/autocomplete?q=as

我需要在客户端做什么，这样如果用户键入内容然后删除，他们就不会重新查询。例如他们键入 a-s-p-<delete>-t 如何防止出现重复的 ?q=as 查询？如果我包含 Cache-Control header，我原以为这是自动的，但它似乎不起作用。

Answer 1

这是我与 jQuery 自动完成功能一起使用的功能（有目的阅读评论）。它在客户端缓存结果，因此您无需处理 server/browser 缓存。此特定示例用于简单的供应商名称查找：

// An obbject/map for search term/results tracking
var vendorCache = {};

// Keep track of the current AJAX request
var vendorXhr;

$('#VendorName').autocomplete({
    source: function (request, response) {
        // Check if we already searched and map the existing results
        // into the proper autocomplete format
        if (request.term in vendorCache) {
            response($.map(vendorCache[request.term], function (item) {
                return { label: item.name, value: item.name, id: item.id };
            }));
            return;
        }
        // search term wasn't cached, let's get new results
        vendorXhr = $.ajax({
            url: 'path/to/vendor/controller',
            type: 'GET',
            dataType: 'json',
            data: { query: request.term },
            success: function (data, status, xhr) {
                // cache the results
                vendorCache[request.term] = data;
                // if this is the same request, return the results
                if (xhr === vendorXhr) {
                    response($.map(data, function (item) {
                        return { label: item.name, value: item.name, id: item.id };
                    }));
                }
            }
        });
    },
    focus: function (event, ui) {
        $('#VendorId').val((ui.item ? ui.item.id : ''));
    },
    select: function (event, ui) {
        $('#VendorId').val((ui.item ? ui.item.id : ''));
    },
    minLength: 3 // require at least three characters from the user 
});

基本上，您会在按术语索引的对象中跟踪搜索结果。如果您搜索相同的术语，您将获得缓存的结果。还有一些额外的代码用于取消和重新使用当前的运行 AJAX 请求。

缓存自动完成 JSON 响应

Caching autocomplete JSON responses

api

jquery

json

caching

autocomplete