Display item counter next to search form. #6
1 changed files with 13 additions and 14 deletions
|
@ -17,6 +17,7 @@ function renderItems() {
|
||||||
const container = document.getElementById('results');
|
const container = document.getElementById('results');
|
||||||
const template = document.getElementById('item');
|
const template = document.getElementById('item');
|
||||||
const loading = document.getElementById('loading');
|
const loading = document.getElementById('loading');
|
||||||
|
let count = 0;
|
||||||
|
|
||||||
for (const [id, item] of Object.entries(items)) {
|
for (const [id, item] of Object.entries(items)) {
|
||||||
const clone = template.content.cloneNode(true);
|
const clone = template.content.cloneNode(true);
|
||||||
|
@ -32,11 +33,13 @@ function renderItems() {
|
||||||
clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`;
|
clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`;
|
||||||
if (item.hidden) {
|
if (item.hidden) {
|
||||||
clone.querySelector(".result").classList.add('hidden')
|
clone.querySelector(".result").classList.add('hidden')
|
||||||
};
|
} else {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
container.appendChild(clone);
|
container.appendChild(clone);
|
||||||
};
|
};
|
||||||
loading.remove();
|
loading.remove();
|
||||||
updateCounter();
|
updateCounter(count);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getLocString(items, item) {
|
function getLocString(items, item) {
|
||||||
|
@ -68,6 +71,7 @@ function search(e) {
|
||||||
const searchAttrs = ['id', 'name', 'type', 'note', 'content'];
|
const searchAttrs = ['id', 'name', 'type', 'note', 'content'];
|
||||||
const query = e.target.value;
|
const query = e.target.value;
|
||||||
const regex = new RegExp(query, 'i')
|
const regex = new RegExp(query, 'i')
|
||||||
|
let count = 0;
|
||||||
|
|
||||||
for (const elem of document.getElementsByClassName('result')) {
|
for (const elem of document.getElementsByClassName('result')) {
|
||||||
const item = items[elem.id.slice(5)];
|
const item = items[elem.id.slice(5)];
|
||||||
|
@ -86,31 +90,26 @@ function search(e) {
|
||||||
|
|
||||||
if (found) {
|
if (found) {
|
||||||
elem.classList.remove('filtered');
|
elem.classList.remove('filtered');
|
||||||
|
count++;
|
||||||
} else {
|
} else {
|
||||||
elem.classList.add('filtered');
|
elem.classList.add('filtered');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
updateCounter();
|
updateCounter(count);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateCounter(){
|
function updateCounter(count){
|
||||||
let count = 0;
|
const itemcount = document.getElementById('itemcount');
|
||||||
|
|
||||||
for (const elem of document.getElementsByClassName('result')) {
|
|
||||||
if (!elem.matches('.filtered')) {
|
|
||||||
count++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
switch(count) {
|
switch(count) {
|
||||||
case 0:
|
case 0:
|
||||||
document.getElementById('itemcount').textContent = 'No items found.';
|
itemcount.textContent = 'No items found.';
|
||||||
break;
|
break;
|
||||||
case 1:
|
case 1:
|
||||||
document.getElementById('itemcount').textContent = '1 item found.';
|
itemcount.textContent = '1 item found.';
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
document.getElementById('itemcount').textContent = `${count} items found.`;
|
itemcount.textContent = `${count} items found.`;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue