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

我正在使用

bootstrap的typeahead

从数据库中获取“家族的名字”。我看过文件了，我想一切都好。然而，当我开始搜索时，我意识到“搜索”太慢了，我想这是因为每次我按下一个键时，“typeahead”都会发送一个请求

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

也许这些信息会有帮助

这是视图：

这是开发人员工具的视图：

这是JS:

我使用回调发送请求：

这是“typeahead”的配置：

$（'alu#u familia'）。提前键入({
来源：功能（查询、流程）{
buscarFamilia（查询、处理）
}
，更新程序：函数（itemSelected）{
//这是用来获取身份证的
$（“#alu#u fami_id”）.val（familias[itemSelected].id）；
返回所选项目；
}
,
最小长度：2，
匹配器：函数（）{return true；}
，荧光灯：功能（项目）{
var p=家族[项目]；
var itm=“”
+ ""
+ ""
+“+p.nombre+”
+“Padre:+p.Padre+”
+“Madre:+p.Madre+”
+ ""
+ "";
返回itm；
}
});

---

提前感谢。

通过将以前检索到的任何值存储在缓存对象中，可以避免对同一查询发出两个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); var familias={}； var家族标签=[]； var familiasCache={}； //用于搜索字符串的回调 var buscarFamilia=uu.debounce（函数（查询、处理）{ if（FamiliaCache[查询]的类型！=“未定义”）{ 返回过程（familiasCache[query]）； } $.getJSON（{/literal}{$smarty.const.familes_FE_ROOT}{literal}/ws/familia ajax/，{q:query}，函数（数据）{ //清洁容器 家族={}； 家族标签=[]； //使用下划线.js从每个项目获取数据 _.每个（数据、功能（项目、ix、列表）{ //填写每个项目的名称 家庭标签推送（项目名称）； //为模板填充数据 家庭[项目名称]={ id:item.id， nombre:item.nombre， padre:item.padre， madre:item.madre }; }); //将结果存储在缓存中 familiasCache[query]=家族标签； //返回数组 过程（家族标签）； },800);

---

感谢您的回复，但正如您所说，此修改只存储值​​以前检索过。这很好，因为它可以防止在重复一个单词时发送任何请求。但是，我想知道的是，当用户停止键入时，如何仅向服务器发送一个请求。您的代码使用的是

。.debounce（）

因此此函数最多每800毫秒调用一次。因为这里的事件是

keryup

除非您愿意进行一些复杂的时间计算，否则无法判断用户何时停止键入，这可能会降低您的响应速度。因此，您唯一的选择是微调去抖动时间。

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

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