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

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

}); 

这是“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 familiaLabels = [];  
    var familiasCache = {};
    //搜索字符串的回调
    var buscarFamilia = _.debounce（函数（查询，处理）{

    if (typeof familiasCache[query] !== "undefined") {
        返回过程（familiasCache[查询]）；
    }

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

        //清理容器
        家庭 = {};
        家庭标签 = [];

        //使用一些 underscore.js 从每个项目中获取数据
        _.each（数据，函数（项目，ix，列表）{

            //填写每个项目的名称
            familiaLabels.push(item.nombre);

            //为模板填充数据
            家族[item.nombre] = {

              id:item.id,
              名称：item.nombre，
              教士：item.padre，
              madre:item.madre

            };
        });

        // 将结果存入缓存
        familiasCache[查询] = familiaLabels;

        //返回数组
        过程（家庭标签）；
    },800);