Question

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

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

如何使用预取？这必须是一个预先存在的json文件，或者可能是第一次在pageload上向服务器发出请求吗？

是否有任何使用预取和遥控器的工作示例？

仅供参考：这是我使用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>';
    }
})

此代码的作用是什么？

它定义了一个全局变量query_cache;
然后它会查找缓存的结果。如果存在，它将处理，因此服务器上没有负载。
如果没有缓存，则会缓存它，因此下次可以使用它。
解决您的问题。

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之类的东西来缓存频繁的查询结果。

twitter bootstrap typeahead cache json结果

2 个答案: