tk/spectre.console
1
0
Fork 0
mirror of https://github.com/nsnail/spectre.console.git synced 2025-06-19 05:18:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Generalized Search

Browse Source 
Generalized the search to work with any table
with some basic classes and some updated
JavaScript, we can now search colors and emojis.
This commit is contained in:
Khalid Abuhakmeh
2020-10-02 13:19:00 -04:00
committed by Patrik Svensson
parent b1db8a9403
commit e0947708c9
6 changed files with 68 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/input/appendix/colors.md
View File

@ -13,4 +13,19 @@ in markup text such as `AnsiConsole.Markup("[maroon on blue]Hello[/]")`.
# Standard colors
<?# ColorTable /?>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</div>
<input
class="form-control w-100 filter"
data-table="color-results"
type="text" placeholder="Search Colors..." autocomplete="off"
aria-label="Search Colors">
</div>
<?# ColorTable /?>
<script type="text/javascript" src="../assets/js/table-search.js"></script>

21
docs/input/appendix/emojis.md
View File

@ -35,16 +35,19 @@ var rendered = Emoji.Replace(phrase);
_The images in the table below might not render correctly in your
browser for the same reasons mentioned in the `Compatibility` section._
<div class="mb-3">
<div class="form-inline d-flex">
<i class="fas fa-search" aria-hidden="true"></i>
<input id="emoji-search"
class="form-control form-control-sm ml-3 w-75"
type="text" placeholder="Search Emojis..." autocomplete="off"
aria-label="Search Emojis">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</div>
<input
class="form-control w-100 filter"
data-table="emoji-results"
type="text" placeholder="Search Emojis..." autocomplete="off"
aria-label="Search Emojis">
</div>
<?# EmojiTable /?>
<script type="text/javascript" src="../assets/js/emoji-search.js"></script>
<script type="text/javascript" src="../assets/js/table-search.js"></script>

30
docs/input/assets/js/emoji-search.js
View File

@ -1,30 +0,0 @@
$(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

35
docs/input/assets/js/table-search.js Normal file
View File

@ -0,0 +1,35 @@
$(document).ready(function () {
$('.filter').each(function () {
let input = this;
let table = document.getElementById(input.dataset.table);
input.onkeyup = function (event) {
if (event.key === "Enter") {
event.preventDefault();
event.stopPropagation();
return false;
}
let value = input.value.toUpperCase();
let rows = table.getElementsByClassName('search-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