javascript - Typeahead Wait 发出多个请求，而不仅仅是最后一个

Question

我正在使用 bootstrap 的 typeahead 从数据库中获取“姓氏”。我已经阅读了文档，并且我认为一切正常。然而，当我开始搜索时，我意识到“搜索”太慢了，我认为这是因为每次我按下一个键时“预先输入”都会发送一个请求。

如何停止发送大量请求或在填充文本框后尝试发送整个字符串？

也许这些信息会有帮助

这是 View :

这是开发者工具的 View :

这是 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);