From f429e561ce4cca233c684c77eb9329fc43450234 Mon Sep 17 00:00:00 2001
From: Benjamin Brassart <bbrassar@student.42.fr>
Date: Thu, 19 Mar 2026 07:55:17 -0400
Subject: [PATCH 1/3] Add filter input

---
 www/index.css  |  4 ++++
 www/index.html |  1 +
 www/index.js   | 27 +++++++++++++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/www/index.css b/www/index.css
index 9e39ebcb..3ebcc590 100644
--- a/www/index.css
+++ b/www/index.css
@@ -233,3 +233,7 @@ table td.esoteric::after    { content: '\2002\1f984\fe0f'; }
 		text-shadow: 0px 0px 3px var(--main-fg);
 	}
 }
+
+.filtered-out {
+	display: none;
+}
diff --git a/www/index.html b/www/index.html
index 30096764..30596336 100644
--- a/www/index.html
+++ b/www/index.html
@@ -34,6 +34,7 @@ <h3>
 				<span class="invisible">[<a id="stderr-link" target="_blank" href="" title="Systrack analysis log">analysis&nbsp;log</a>]</span>
 				<span>[<a target="_blank" href="https://github.com/mebeim/linux-syscalls" title="Source code for this website on GitHub">website&nbsp;source</a>]</span>
 			</h3>
+			<input id="filter-name" placeholder="Filter name...">
 			<table>
 				<tr>
 					<th class="pad" colspan="6"></th>
diff --git a/www/index.js b/www/index.js
index 0cb20ea9..83180e8a 100644
--- a/www/index.js
+++ b/www/index.js
@@ -10,6 +10,7 @@ const systrackVersEl     = document.getElementById('systrack-version')
 const configLinkEl       = document.getElementById('config-link')
 const stderrLinkEl       = document.getElementById('stderr-link')
 const jsonLinkEl         = document.getElementById('json-link')
+const filterNameEl      = document.getElementById("filter-name")
 
 let db = null
 let currentSyscallTable = null
@@ -303,6 +304,31 @@ function sortTable(e) {
 	header.classList.add(desc ? 'descending' : 'ascending')
 }
 
+function filterTable(text) {
+	if (updateInProgress)
+		return
+
+	const rows       = Array.from(tableEl.querySelectorAll('tr')).slice(2)
+	let filteredIn   = 0
+
+	for (const el of rows) {
+		const value = el.children[2].textContent
+
+		if (value.includes(text)) {
+			el.classList.remove('filtered-out')
+			filteredIn += 1
+		} else {
+			el.classList.add('filtered-out')
+		}
+	}
+
+	sumamryEl.textContent = `${filteredIn} syscalls`
+}
+
+function handleFilterTableEvent(e) {
+	filterTable(e.target.value)
+}
+
 function toggleCollapseColumn(e) {
 	if (updateInProgress)
 		return
@@ -677,6 +703,7 @@ async function setup() {
 	compactSigToggleEl.addEventListener('click', toggleCompactSignature)
 	tableEl.querySelectorAll('th.sortable').forEach(el => el.addEventListener('click', sortTable))
 	tableEl.querySelectorAll('th > .collapse-toggle').forEach(el => el.addEventListener('click', toggleCollapseColumn))
+	filterNameEl.addEventListener('input', handleFilterTableEvent)
 	window.addEventListener('popstate', historyPopStateHandler)
 }
 

From a5466952c68431ccfb102fb3159c34d3238558ee Mon Sep 17 00:00:00 2001
From: Benjamin Brassart <bbrassar@student.42.fr>
Date: Thu, 19 Mar 2026 08:07:26 -0400
Subject: [PATCH 2/3] Apply filter after update and argument compact

---
 www/index.html | 2 +-
 www/index.js   | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/www/index.html b/www/index.html
index 30596336..cb8a51d7 100644
--- a/www/index.html
+++ b/www/index.html
@@ -34,7 +34,7 @@ <h3>
 				<span class="invisible">[<a id="stderr-link" target="_blank" href="" title="Systrack analysis log">analysis&nbsp;log</a>]</span>
 				<span>[<a target="_blank" href="https://github.com/mebeim/linux-syscalls" title="Source code for this website on GitHub">website&nbsp;source</a>]</span>
 			</h3>
-			<input id="filter-name" placeholder="Filter name...">
+			<input id="filter-name" placeholder="Filter name..." autocomplete="off">
 			<table>
 				<tr>
 					<th class="pad" colspan="6"></th>
diff --git a/www/index.js b/www/index.js
index 83180e8a..c52692f4 100644
--- a/www/index.js
+++ b/www/index.js
@@ -149,6 +149,7 @@ function afterUpdate() {
 	archSelectEl.disabled = false
 	tagSelectEl.disabled = false
 	updateInProgress = false
+	filterTable(filterNameEl.value)
 }
 
 function clearOptions(selectEl) {
@@ -542,6 +543,7 @@ function toggleCompactSignature() {
 	localStorage.setItem('compactSignature', compactSignature)
 	// Could be optimized... but I could also not care less for now
 	fillTable(currentSyscallTable, realTag(arch, bits, abi, tag))
+	filterTable(filterNameEl.value)
 }
 
 async function update(pushHistoryState) {

From e5fb6ddb7e9f047d77cd40787ee470b8ffd22c29 Mon Sep 17 00:00:00 2001
From: Benjamin Brassart <bbrassar@student.42.fr>
Date: Thu, 19 Mar 2026 08:09:16 -0400
Subject: [PATCH 3/3] Fix style

---
 www/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/index.js b/www/index.js
index c52692f4..3cf9dd98 100644
--- a/www/index.js
+++ b/www/index.js
@@ -10,7 +10,7 @@ const systrackVersEl     = document.getElementById('systrack-version')
 const configLinkEl       = document.getElementById('config-link')
 const stderrLinkEl       = document.getElementById('stderr-link')
 const jsonLinkEl         = document.getElementById('json-link')
-const filterNameEl      = document.getElementById("filter-name")
+const filterNameEl       = document.getElementById("filter-name")
 
 let db = null
 let currentSyscallTable = null