const _inforSearch = {
url: window.location.origin,
instances: {},
request: null,
timout: null,
container: null,
search_index: null,
response: [],
get: (id) => {
return _inforSearch.instances[id];
},
instanceByContainer: container => {
const id = container.attr('id');
return _inforSearch.get(id);
}
}
function initInforSearch() {
if (typeof __infor_base === 'undefined') {
console.log('infor-base.js is not included!');
return;
}
$('infor-search').each(function () {
const container = $(this);
const initiated = container.attr('data-initiated');
if(initiated !== undefined){ return true; }
container.append(`
`);
const input_display = container.find('[data-infor-search-input-display]');
const input_hidden = container.find('[data-infor-search-input-hidden]');
const params_location = container.attr('data-params') || null;
const id = container.attr('id') || randomString(10);
container.removeAttr('id');
const name = container.attr('name');
input_hidden.attr('name', name);
container.removeAttr('name');
const attributes = container.get(0).attributes;
$.each(attributes, function () {
input_display.attr(this.name, this.value);
});
while (attributes.length) {
container.removeAttr(attributes[0].name);
}
const all_results = input_display.attr('data-all-results');
container.attr('id', id);
container.attr('data-initiated', true);
_inforSearch.instances[id] = {
container: container,
name: name,
id: id,
input: container.find('[data-infor-search-input-hidden]'),
params_location: params_location,
getValue: () => {
return {
name: input_display.val(),
value: input_hidden.val(),
}
},
input_hidden: () => { return container.find('[data-infor-search-input-hidden]') },
input_display: () => { return container.find('[data-infor-search-input-display]') },
results: () => { return container.find('[data-infor-search-results]') },
results_focused: () => { return container.find('[data-infor-search-result][data-focused]') },
results_options: () => { return container.find('[data-infor-search-result]') },
results_container: () => { return container.find('[data-infor-search-results-container]') },
all_results_option: all_results == 'true',
onchange: value => {}
}
});
}
function fillInforSearchResults() {
const container = _inforSearch.container;
const response = _inforSearch.response;
const instance = _inforSearch.instanceByContainer(container);
const { results, results_container, input_display } = instance;
let content = input_display().attr('data-content');
let sub_content = input_display().attr('data-sub-content');
const content_keys = (content || '').replaceAll(' ', '').split(',');
const sub_content_keys = (sub_content || '').replaceAll(' ', '').split(',');
results().empty();
results_container().find(`[data-infor-search-result="*"]`).remove();
if (!response.length) {
results().html(`Geen resultaten gevonden
`);
return;
}
for (const row of response) {
let row_content = content.replaceAll(',', '');
let row_sub_content = sub_content.replaceAll(',', '');
$.each(content_keys, (index, key) => {
row_content = row_content.replace(key, (row[key] || ''));
});
$.each(sub_content_keys, (index, key) => {
row_sub_content = row_sub_content.replace(key, (row[key] || ''))
});
results().append(`
${row_content}
${row_sub_content}
`);
}
if (instance.all_results_option) {
results_container().append(`
Alle resultaten ( ${response.length} )
`);
}
}
$(document).keydown(function(event){
const { container, search_index } = _inforSearch;
if(!container){return;}
const instance = _inforSearch.instanceByContainer(container);
const { results_options, results_focused, results } = instance;
const { key } = event;
if(key != "ArrowUp" && key != "ArrowDown" && key != "Enter"){return;}
if(event.key == "Enter"){
event.preventDefault();
event.stopPropagation();
results_options().eq(_inforSearch.search_index).click();
return false;
}
results_options().removeAttr('data-focused');
if(event.key == 'ArrowDown'){
if(search_index === null || search_index === (results_options().length - 1)){ _inforSearch.search_index = 0; }
else{ _inforSearch.search_index += 1; }
}
else if(event.key == 'ArrowUp'){
if(search_index === null || search_index === 0){ _inforSearch.search_index = (results_options().length - 1); }
else{ _inforSearch.search_index += -1; }
}
results_options().eq(_inforSearch.search_index).attr('data-focused', true);
const container_height = results().height();
const scroll_offset = results().scrollTop();
const top_offset = results_focused().position().top;
const focused_option_height = (results_focused().outerHeight() / 2);
if(top_offset > container_height){
results().scrollTop(top_offset - container_height + scroll_offset + focused_option_height + 20);
}
else if(top_offset < 0){
results().scrollTop(scroll_offset - Math.abs(top_offset) - 10);
}
});
$(document).on('input', 'infor-search [data-infor-search-input-display]', function () {
const container = findContainerByTag('infor-search', this);
const instance = _inforSearch.instanceByContainer(container);
const { input_display, input_hidden, results, results_container, results_options, params_location } = instance;
const value = input_display().val();
const api = input_display().attr('data-api');
const is_loading = results().find('[data-infor-search-spinner]').length;
if (!value) {
results_container().css({ display: '' });
input_hidden().val('').trigger('change');
instance.onchange(null);
return;
}
if (_inforSearch.request) {
_inforSearch.request.abort();
_inforSearch.request = null;
}
if(_inforSearch.timeout){
clearTimeout(_inforSearch.timeout);
_inforSearch.timeout = null;
}
if (!is_loading) {
results().html(`
`);
}
results_container().css({ display: 'block' });
_inforSearch.search_index = null;
results_options().remove()
const params = _window(params_location, {});
const data = {
search: value
}
Object.assign(data, params);
_inforSearch.timeout = setTimeout(() => {
_inforSearch.request = ajax(api, data);
_inforSearch.request
.then(response => {
_inforSearch.container = container;
_inforSearch.response = response;
fillInforSearchResults();
})
}, 100);
})
$(document).on('click', 'infor-search [data-infor-search-input-display]', function () {
hideSearchables();
if (!this.value) { return; }
$(this).trigger('input');
})
$(document).on('click', 'infor-search [data-infor-search-result]', function () {
const container = findContainerByTag('infor-search', this);
const instance = _inforSearch.instanceByContainer(container);
const { input_display, input_hidden } = instance;
const result = $(this);
const content = result.find('[data-infor-search-result-content]').text();
let value = result.attr('data-infor-search-result');
input_hidden().val(value).trigger('change');
input_display().val(content)
if (value === '*') {
value = [];
for (const instance of _inforSearch.response) {
value.push(instance.id);
}
}
instance.onchange(value);
})
$(document).click(function(event) {
if (!$(event.target).is('[data-infor-search-input-display]')) {
hideSearchables()
}
});
function hideSearchables(){
if (_inforSearch.request) {
_inforSearch.request.abort();
_inforSearch.request = null;
}
_inforSearch.container = null;
_inforSearch.search_index = null;
$('infor-search').find('[data-infor-search-results-container]').css({ display: '' })
$('infor-search').find('[data-infor-search-results]').empty()
$('infor-search').find('[data-infor-search-result="*"]').remove();
$.each(_inforSearch.instances, (id, instance) => {
if(!instance.input_hidden().val()){
instance.input_display().val('');
}
})
}
initInforSearch();