twitter引導式鍵入緩存json結果

Question

我在我的應用程序中使用twitter引導程序庫，並且正在成爲一個很棒的體驗。現在我正在實施自動完成的引導類型。 我在這裏緩存結果的問題，以避免對服務器的許多請求。同時在網上做研究時，我發現這個lib https://github.com/twitter/typeahead.js也被稱爲twitter typeahead。這似乎與boottrap http://twitter.github.io/bootstrap/javascript.html#typeahead上的很不一樣。我錯了嗎？

的第一選擇似乎是最適合於預期，但我有以下問題：

• 如何使用預取？這必須是預先存在的json文件，或者可能是第一次請求頁面加載的服務器？

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

僅供參考：這是我與Twitter boottrap預輸入實際的代碼（不是嘰嘰喳喳預輸入）

$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 header中添加緩存。

在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緩存頻繁查詢結果。