jquery - twitter bootstrap typeahead 缓存 json 结果

Question

我在我的应用程序中使用 twitter bootstrap lib，这是一次很棒的体验。现在我正在实现 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. 解决您的问题。