Typeahead等待發出多個請求而不是最後一個

Question

我使用bootstrap's typeahead從數據庫中獲取「家族姓名」。我已閱讀文檔，並且我認爲一切正常。但是，當我開始搜索時，我意識到'搜索'速度太慢，我認爲這是因爲「鍵入」每次按鍵時都會發送一個請求。

如何停止發送多個請求或嘗試在填充文本框後發送整個字符串？

也許這個信息可以幫助

這是視圖：

這是開發工具的看法：

這是JS：

我使用回調發送請求：

var familias = {}; 
var familiaLabels = []; 

//Callback for searching the string 
var buscarFamilia = _.debounce(function(query, process){ 

    $.getJSON('{/literal}{$smarty.const.FAMILIARES_FE_ROOT}{literal}/ws/familia-ajax/', { q: query }, function (data) { 

     //Clean containers 
     familias = {}; 
     familiaLabels = []; 

     //Using some underscore.js for getting data from each item 
     _.each(data, function(item, ix, list){ 

      //Fill with the name of each item 
      familiaLabels.push(item.nombre); 

      //Fill data for the template 
      familias[ item.nombre ] = { 

       id:item.id, 
       nombre:item.nombre, 
       padre:item.padre, 
       madre:item.madre 

      }; 
     }); 

     //Return the array 
     process(familiaLabels); 
    },800); 

}); 

這是 「預輸入」 的配置：

$('#alu_familia').typeahead({ 
    source: function (query, process) { 

     buscarFamilia (query, process) 
    } 
    , updater: function (itemSelected) { 

     //This is for getting the id 
     $("#alu_fami_id").val(familias[ itemSelected].id); 


     return itemSelected; 
    } 
    , 
    minLength:2, 
    matcher: function() { return true; } 
    ,highlighter: function(item){ 
     var p = familias[ item ]; 
     var itm = '' 
       + "<div class='typeahead_wrapper'>" 
       + "<div class='typeahead_labels'>" 
       + "<div class='typeahead_primary'>" + p.nombre + "</div>" 
       + "<div class='typeahead_secondary'><b>Padre: </b>" + p.padre +"</div>" 
       + "<div class='typeahead_secondary'><b>Madre: </b>"+p.madre+ "</div>" 
       + "</div>" 
       + "</div>"; 
     return itm; 
    } 
    }); 

在此先感謝。

Answer 1

可避免在高速緩存中的對象存儲任何先前獲取的值，這樣使得對同一查詢的兩個Ajax請求：

 

    var familias = {}; 
    var familiaLabels = []; 
    var familiasCache = {}; 
    //Callback for searching the string 
    var buscarFamilia = _.debounce(function(query, process){ 

    if (typeof familiasCache[query] !== "undefined") { 
     return process(familiasCache[query]); 
    } 

    $.getJSON('{/literal}{$smarty.const.FAMILIARES_FE_ROOT}{literal}/ws/familia-ajax/', { q: query }, function (data) { 

     //Clean containers 
     familias = {}; 
     familiaLabels = []; 

     //Using some underscore.js for getting data from each item 
     _.each(data, function(item, ix, list){ 

      //Fill with the name of each item 
      familiaLabels.push(item.nombre); 

      //Fill data for the template 
      familias[ item.nombre ] = { 

       id:item.id, 
       nombre:item.nombre, 
       padre:item.padre, 
       madre:item.madre 

      }; 
     }); 

     // store result in cache 
     familiasCache[query] = familiaLabels; 

     //Return the array 
     process(familiaLabels); 
    },800);