Report errors in live search without a modal dialog (alert)
This commit is contained in:
parent
254ace7d24
commit
551c4dc52b
2 changed files with 26 additions and 4 deletions
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue