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;
}
});
前もって感謝します。