Typeahead Wait发出多个请求而不是最后一个请求

Question

我正在使用bootstrap's typeahead从数据库中获取“姓氏”。我已经阅读了文档，我认为一切正常。然而，当我开始搜索时，我意识到“搜索”太慢了，我认为这是因为“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);

}); 

这是“typeahead”的配置：

$('#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);