Commit 0c4f4655 authored by Jonas Götze's avatar Jonas Götze
Browse files

[WIP][FEATURE] suggest for locations

parent 4193005a
......@@ -2,6 +2,10 @@ document.querySelectorAll('input.js__eventsubmissionform__location-search_input'
let targetElementName = searchInput.getAttribute('data-location-search-target');
let targetElementId = searchInput.id.replace('-locationSearch', '-' + targetElementName);
let targetElement = document.getElementById(targetElementId);
let loadingIndicator = document.getElementById('loadingDiv');
const statusMessageId = 'js__eventsubmissionform__location-search_status';
let statusMessage = document.createElement('li');
statusMessage.id = statusMessageId;
if(typeof targetElement !== 'undefined') {
const _eventSubmissionFormLocationSearch = new XMLHttpRequest();
let resultList = document.createElement('ul');
......@@ -11,33 +15,59 @@ document.querySelectorAll('input.js__eventsubmissionform__location-search_input'
searchInput.parentNode.insertBefore(resultList, searchInput.nextSibling);
_eventSubmissionFormLocationSearch.onreadystatechange = function (response) {
resultList.innerHTML = '';
if (_eventSubmissionFormLocationSearch.readyState === 4) {
if (_eventSubmissionFormLocationSearch.status === 200) {
const jsonOptions = JSON.parse(_eventSubmissionFormLocationSearch.responseText);
jsonOptions.forEach(function (item) {
let option = document.createElement('li');
option.setAttribute('data-id',item.uid);
let content = [
'<strong>' + item.title + '</strong>'
];
if (item.address) {
content.push(item.address);
}
if (item.zip || item.city) {
content.push((item.zip + ' ' + item.city).trim());
}
if (item.country) {
content.push(item.country);
}
option.innerHTML = content.join('<br />');
resultList.appendChild(option);
});
searchInput.placeholder = "enter location";
if(_eventSubmissionFormLocationSearch.responseText === '') {
statusMessage.innerHTML = 'sorry, no results';
resultList.appendChild(statusMessage);
} else {
const jsonOptions = JSON.parse(_eventSubmissionFormLocationSearch.responseText);
jsonOptions.forEach(function (item) {
let option = document.createElement('li');
option.setAttribute('data-id', item.uid);
let displayValue = [item.title];
let content = [
'<strong>' + item.title + '</strong>'
];
if (item.address) {
content.push(item.address);
displayValue.push(item.address);
}
if (item.zip || item.city) {
let zipCity = (item.zip + ' ' + item.city).trim();
content.push(zipCity);
displayValue.push(zipCity);
}
if (item.country) {
content.push(item.country);
displayValue.push(item.country);
}
option.innerHTML = content.join('<br />');
resultList.appendChild(option);
option.setAttribute('data-display-value', displayValue.join(', '));
});
}
} else {
searchInput.placeholder = "An error occured while loading locations";
statusMessage.innerHTML = 'An error occured while loading locations';
resultList.appendChild(statusMessage);
}
}
loadingIndicator.style.display = "none";
};
resultList.addEventListener('click', function(event) {
if (event.target && event.target.nodeName !== 'UL') {
let selectedElement = event.target;
if (event.target.nodeName !== 'LI') {
selectedElement = event.target.closest('li');
}
if (selectedElement.id !== statusMessageId) {
targetElement.value = selectedElement.getAttribute('data-id');
searchInput.value = selectedElement.getAttribute('data-display-value');
}
resultList.innerHTML = '';
}
});
let delay = function(callback, ms) {
let timer = 0;
return function() {
......@@ -53,6 +83,7 @@ document.querySelectorAll('input.js__eventsubmissionform__location-search_input'
resultList.innerHTML = '';
let searchPhrase = searchInput.value;
if(searchPhrase.length > 2) {
loadingIndicator.style.removeProperty("display");
_eventSubmissionFormLocationSearch.abort();
_eventSubmissionFormLocationSearch.open(
'GET',
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment