Report errors in live search without a modal dialog (alert)

This commit is contained in:
Magnus Hoff 2017-10-31 14:03:29 +01:00
parent 254ace7d24
commit 551c4dc52b
2 changed files with 26 additions and 4 deletions

View file

@ -18,11 +18,17 @@ function debouncer(interval, callback) {
const results = form.querySelector('.live-results'); const results = form.querySelector('.live-results');
const resultPrototype = document.getElementById('search-result-prototype').firstChild; const resultPrototype = document.getElementById('search-result-prototype').firstChild;
function clearChildren(element) {
while (element.lastChild) {
element.removeChild(results.lastChild);
}
}
let ongoing = false; let ongoing = false;
function submit() { function submit() {
if (input.value === "") { if (input.value === "") {
results.classList.remove("show"); results.classList.remove("show");
while (results.lastChild) results.removeChild(results.lastChild); clearChildren(results);
return; return;
} }
@ -43,7 +49,7 @@ function debouncer(interval, callback) {
return response.json(); return response.json();
}).then(result => { }).then(result => {
while (results.lastChild) results.removeChild(results.lastChild); clearChildren(results);
result.hits.forEach((hit, index) => { result.hits.forEach((hit, index) => {
const item = resultPrototype.cloneNode(true); const item = resultPrototype.cloneNode(true);
@ -68,9 +74,18 @@ function debouncer(interval, callback) {
ongoing = false; ongoing = false;
}).catch(err => { }).catch(err => {
ongoing = false;
console.error(err); console.error(err);
alert(err); // TODO Better interactive error reporting
clearChildren(results);
results.classList.add("show");
const item = document.createElement("li");
item.classList.add("search-result");
item.classList.add("error");
item.textContent = "Live search unavailable";
results.appendChild(item);
ongoing = false;
}); });
} }
const submitter = debouncer(300, submit); const submitter = debouncer(300, submit);

View file

@ -385,6 +385,13 @@ input[type="search"] {
border-top: none; border-top: none;
} }
.live-results .search-result.error {
border: 1px solid #ccc;
border-top: none;
padding: 8px;
color: #888;
}
@media (min-width: 630px) { @media (min-width: 630px) {
.search { .search {
text-align: right; text-align: right;