Example of remote Typeahead.js

ReadMe.md

Requirement

• typeahead.js
• Bloodhound.js
• Handlebars.js

modTAH.js

let ks_typeahead = $('.ks_typeahead_client');

let ks_Pager = {
    //- Variables
    ks_page:1, ks_pages:5, ks_total:0, ks_per_page:5,
    //- GETTERS
    getPage: function () { return this.ks_page; },
    getPages: function () { return this.ks_pages; },
    getTotal: function () { return this.ks_total; },
    getNext: function () { return this.getPage() < this.getPages() ? this.getPage() + 1 : this.getPages(); },
    getPrevious: function () { return this.getPage() > 1 ? this.getPage() - 1 : 1; },
    //- SETTERS
    setPage: function (value) {
        this.ks_page = parseInt(value);
        let p = this.getPage();
        setTimeout(function() {
            $(".ks_typeahead_header_page").text(p);
        }, 0);
    },
    setPages: function (value) {
        this.ks_pages = parseInt(value);
        let p = this.getPages();
        setTimeout(function() { $(".ks_typeahead_header_pages").text(p); }, 0);
    },
    setTotal: function (value) {
        this.ks_total = parseInt(value);
        let t = this.getTotal();
        setTimeout(function() { $(".ks_typeahead_header_total").text(t); }, 0);
    },
    setNext: function () { this.setPage(this.getNext()) },
    setPrevious: function () { this.setPage(this.getPrevious()); },
    //- METHODS
    isFirst: function () { return this.getPage() === 1; },
    isLast: function () { return this.getPage() === this.getPages(); },
    buttonEnabler: function () {
        // console.log(this.isFirst() + " | "+ this.isLast());
        $("#ks_typeahead_header_button_previous").prop('disabled',this.isFirst());
        $("#ks_typeahead_header_button_next").prop('disabled',this.isLast());
        // For link buttons
        // let bp = $("#ks_typeahead_header_button_previous");
        // let bn = $("#ks_typeahead_header_button_next");
        // this.isFirst() ? bp.removeAttr('href'):bp.attr('href','javascript:;');
        // this.isLast() ? bn.removeAttr('href'):bn.attr('href','javascript:;');
    },
    goToNext: function () {
        this.setNext();
        this.reset()
    },
    goToPrevious: function () {
        this.setPrevious();
        this.reset()
    },
    reset: function () {
        let query = ks_typeahead.typeahead('val');
        ks_typeahead.typeahead('val', '');
        ks_typeahead.typeahead('val', query);
    }
};



// Class definition
let KTTypeahead = function() {

    let ks_demo_client = function() {

        let options = {
            datumTokenizer: function (datum) { return Bloodhound.tokenizers.whitespace(datum.value); },
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                cache: false,
                prepare: function(query, settings) {
                    settings.url += '?'+'search_value=' + query+'&ks_page='+ks_Pager.getPage();
                    return settings;
                },
                url: UrlListClients_4typeahead,
                transform: function (response) {
                    let meta = response.meta;
                    ks_Pager.setPage(meta.page);
                    ks_Pager.setPages(meta.pages);
                    ks_Pager.setTotal(meta.total);
                    return response.params.clients;
                    // return $.map(response.params.clients, function (client) {
                    //
                    //     switch (ks_source) {
                    //         case "gestion_clients":
                    //         {
                    //             return {
                    //                 'tokenKechtrip':client.tokenKechtrip,
                    //                 'nom':client.nom,
                    //                 'prenom':client.prenom,
                    //                 // 'id':client.id
                    //             };
                    //         }
                    //         case "gestion_services": return client;
                    //     }
                    // });
                }
            }
        };
        let engine = new Bloodhound(options);

        ks_typeahead.typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
            {
                limit: Number.MAX_VALUE,
                displayKey: 'nom',
                source: engine.ttAdapter(),
                templates: {
                    empty: '<div class="p-3 text-center">Pas de résultat</div>',
                    suggestion: Handlebars.compile('<div>{{nom}} {{prenom}}</div>'),
                    header: Handlebars.compile([
                        '<div class="text-center p-1 kt-font-bold">',
                        '<button class="btn btn-outline-brand btn-sm" id="ks_typeahead_header_button_previous" onclick="ks_Pager.goToPrevious();")><i class="fa fa-angle-double-left"></i></button>',
                        // '<a class="kt-link kt-font-boldest" id="ks_typeahead_header_button_previous"  onclick="ks_Pager.goToPrevious();" ><i class="fa fa-angle-double-left"></i> Précédent</a>',
                        '<span class="pl-2 pr-2"> Affichage de <span class="ks_typeahead_header_page kt-font-danger">#</span> sur <span class="ks_typeahead_header_pages kt-font-danger">#</span></span>',
                        '<button class="btn btn-outline-brand btn-sm" id="ks_typeahead_header_button_next" onclick="ks_Pager.goToNext()"><i class="fa fa-angle-double-right"></i></button>',
                        // '<a class="kt-link kt-font-boldest" id="ks_typeahead_header_button_next"  onclick="ks_Pager.goToNext();" >Suivent <i class="fa fa-angle-double-right"></i></a>',
                        '</div>'
                    ].join('\n')),
                    footer: Handlebars.compile([
                        '<div class="text-center p-1">',
                        '<span class="pl-2 pr-2 kt-font-danger kt-font-bold"><span class="ks_typeahead_header_total">#</span> résultats en total</span>',
                        '</div>'
                    ].join('\n'))
                }
            })
            .on('typeahead:render', function(ev, suggestion) {
                setTimeout(function(){ ks_Pager.buttonEnabler(); }, 0);
                // console.log(ev)
            })
            // .on('typeahead:queryChanged', function(ev, suggestion) {
            //     alert("queryChanged");
            // })
            .on('typeahead:selected', function onSelected($e, datum)
            {
                switch (ks_sources.getCurrentModal()) {
                    case "clientModal":
                    {
                        // ks_ngscope_clientModal.formClientData = datum;
                        ks_ngscope_clientModal.ks_loadClient(datum.tokenKechtrip);
                        setTimeout(function(){ KS_Select2.init(); }, 0);

                    } break;
                    case "serviceModal":
                    {
                        //todo show historique

                        ks_ngscope_serviceModal.formServiceClientData = datum;
                        setTimeout(function(){
                            KS_Select2.init();
                            ks_datatable_serviceModal.setDataSourceParam('token', datum.tokenKechtrip);
                            KTApp.block('#ks_blockui_ServiceClientModal', {
                                overlayColor: '#000000',
                                type: 'v2',
                                state: 'success',
                                message: 'Chargement ...'
                            });
                            ks_datatable_serviceModal.reload();
                            }, 0);

                    } break;
                }

                // datum.id
            })
        // .on('typeahead:autocompleted', onAutocompleted)
        // .on('typeahead:asyncrequest', function(evt,  query, dataset) {
        //     // setTimeout(function(){ ks_Pager.buttonEnabler(); }, 100);
        //
        //     console.log('show progress indicator');
        //     console.log(dataset);
        //     console.log(evt);
        //     console.log(query);
        // })
        // ;

    }


    return { init: function() { ks_demo_client(); } };
}();

jQuery(document).ready(function() {
    KTTypeahead.init();
});