twitter bootstrap 预输入缓存 json 结果

Question

我在我的应用程序中使用 twitter 引导库，这是一次很棒的体验。现在我正在为自动完成实现 bootstrap typeahad。 在这里，我在缓存结果以避免对服务器的许多请求时遇到问题。在网上进行研究时，我发现了这个库https://github.com/twitter/typeahead.js，也称为 twitter typeahead。这似乎与 boottrap http://twitter.github.io/bootstrap/javascript.html#typeahead 上的非常不同。我错了吗？

第一个选项似乎最适合预期，但我有以下问题：

• 如何使用预取？这必须是预先存在的 json 文件，或者可能是页面加载时对服务器的第一个请求？

  是否有任何使用预取和远程的工作示例？

仅供参考：这是我的实际代码，带有 twitter boottrap typeahead（不是 twitter typeahead）

$searchbox.typeahead(
      {
          minLength: 2,
          source: function (query, process) {
              $SearchID.val('');
              persons = [];
              map = {};
              $.getJSON("App_Services/MyService.svc/GetData", { max: 100, criteria: query }, function (data) {
 
                  $.each(data, function (i, person) {
                      map[person.name] = person;

                      persons.push(person.name);
                  });
                  process(persons);
              });

          },
          updater: function (item) {
              selected = map[item].id;
              //alert(selected)
              return item;
          },
          matcher: function (item) {
              if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
                  return true;
              }
          },
          sorter: function (items) {
              return items.sort();
          },
          highlighter: function (item) {
              var regex = new RegExp('(' + this.query + ')', 'gi');
              return '<div>' + item.replace(regex, "<strong>$1</strong>") + '</div>';
          }
      })

只是为了澄清。我要做的是创建结果缓存，如果在缓存中找不到匹配项，则仅使用服务器。

Answer 1

window.query_cache = {};
$searchbox.typeahead({
    minLength: 2,
    source: function(query, process) {
        if (query_cache[query]) {
            process(query_cache[query]); //If cached, use it !
            return;
        }
        $SearchID.val('');
        persons = [];
        map = {};
        $.getJSON("App_Services/MyService.svc/GetData", {
            max: 100,
            criteria: query
        }, function(data) {
            $.each(data, function(i, person) {
                map[person.name] = person;
                persons.push(person.name);
            });
            query_cache[query] = persons; //Add it if it doesn't exist.
            process(persons);
        });
    },
    updater: function(item) {
        selected = map[item].id;
        //alert(selected)
        return item;
    },
    matcher: function(item) {
        if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
            return true;
        }
    },
    sorter: function(items) {
        return items.sort();
    },
    highlighter: function(item) {
        var regex = new RegExp('(' + this.query + ')', 'gi');
        return '<div>' + item.replace(regex, "<strong>$1</strong>") + '</div>';
    }
})

这段代码有什么作用？

1. 它定义了一个全局变量query_cache；
2. 然后它会查找缓存的结果。如果存在，它将对其进行处理，因此服务器上没有负载。
3. 如果没有缓存，就缓存，下次可以使用。
4. 解决您的问题。

Answer 2

在您的情况下，为了避免对服务器的大量请求，您应该在服务器端输出 json 时在 http 标头中添加缓存。

在 PHP 中它喜欢：

$time = time();  
$interval = 3600 * 24 * 60; //cache for 60 days  
header('Last-Modified: '.gmdate('r',$time));  
header('Expires: '.gmdate('r',($time+$interval)));  
header('Cache-Control: max-age='.$interval);  
header('Content-type: application/json');
echo $json;
exit;

为了避免对数据库的多次查询，你应该使用memcache之类的东西来缓存经常查询的结果。