2

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

前もって感謝します。

4

1 に答える 1