Requirement
- typeahead.js
- Bloodhound.js
- Handlebars.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(); | |
}); |