Bootstrap typehead頭部預取功能

Question

因此，我使用Bootstraps typeahead API來創建實時搜索。

源參數很好，因爲它允許使用AJAX調用從服務器獲取數據。不過，我希望能夠在頁面加載時「預取」源，並且只在「預取」數據中沒有匹配的情況下執行ajax調用。

我怎麼能使這成爲可能？我的阿賈克斯呼叫在這裏：

$("#topsearchbar").typeahead({ 
     items: 8, 
     source: function (query, process) { 
      $.get("/topsearchbar", {"data":query}, function(data) { 
       process(data); 
      }); 
     } 
    }); 

Answer 1

嗯，這是我是如何做的到底：

var Obj = {}; 
var Arr = []; 
var preFetchResult = function (query, callback) { 
    $.get("/request", {"data":query}, function(data) { 
     Obj = {}; 
     Arr = []; 
     for (var i = 0; i < data.length; i++) { 
      Arr.push(data[i].name); 
      Obj[ data[i].id ] = data[i].name; 
     } 
     callback(Obj,Arr); 
    }); 
}; 

$(window).load(function() { 
    preFetchResult("", function(obj,arr) { // Empty query prefetches all db data 
     $("#bar").typeahead({ 
      items: 8, 
      source: function (query, process) { 
       process(arr); 
       $.get("/request", {"data":query}, function(data) { 
        for (var i = 0; i < data.results.length; i++) { 
         if (obj[data.results[i].id] === undefined) { 
          obj[data.results[i].id] = data.results[i].name; 
          arr.push(data.results[i].name); 
         } 
        } 
        process(arr); 
       }); 
      } 
     }); 
    }); 
}); 

Answer 2

所以你真正想要的是緩存已經獲取的數據。

var query_data = {}; 
$("#topsearchbar").typeahead({ 
    items: 8, 
    source: function (query, process) { 
     if (query_data[query] === undefined) { 
      $.get("/topsearchbar", {"data":query}, function(data) { 
       query_data[query] = data; 
       process(data); 
      }); 
     } else { 
      process(query_data[query]); 
     } 
    } 
});