Requirement
- typeahead.js
- Bloodhound.js
- Handlebars.js
Last active
August 3, 2019 10:53
-
-
Save aelfannir/930569c046547e5856edb27c714e3f3e to your computer and use it in GitHub Desktop.
Example of remote Typeahead.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment