Add Search To Emoji Page

This adds a typeahead search feature
for the very large emoji table. It filters as you type to find if an emoji exists or not.

The JavaScript could be adapted to work on all tables in the future.
This commit is contained in:
Khalid Abuhakmeh
2020-10-01 15:52:52 -04:00
committed by Patrik Svensson
parent 672faa131f
commit a2f8652575
3 changed files with 47 additions and 5 deletions

View File

@ -0,0 +1,30 @@
$(document).ready(function () {
let input = document.getElementById('emoji-search');
let table = document.getElementById('emoji-results');
input.onkeyup = function (event) {
if (event.key === "Enter") {
event.preventDefault();
event.stopPropagation();
return false;
}
let value = input.value.toUpperCase();
let rows = table.getElementsByClassName('emoji-row');
for (let i = 0; i < rows.length; i++) {
let row = rows[i];
let match =
new RegExp(value, "i").test(row.textContent) ||
value === '';
if (match) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
}
}; // keyup
}); // ready