Forms · Complete runnable example
Filter a small local collection without interrupting typing or treating text as code.
This preview runs in an isolated document. Clipboard writes and saved preferences may be blocked, and printing requires the standalone file. A dialog affects only the example. Reset reloads the original example state.
Use this pattern for a short list already loaded into a page. It waits briefly after typing before filtering and announces the resulting count without moving keyboard focus.
The preview, copied text, and downloaded file use this same document.
<!doctype html>
<!--
MIT License
Copyright (c) 2026 MRHTML
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:; connect-src 'none'; form-action 'none'; object-src 'none'; base-uri 'none'"
/>
<title>MRHTML | Debounced local search</title>
<style>
:root {
color-scheme: light;
--paper: #f6f5f0;
--white: #fff;
--ink: #172437;
--muted: #546171;
--line: #c9ced4;
--blue: #204cbb;
--soft: #e9eefb;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
line-height: 1.65;
}
main {
width: min(72rem, calc(100% - 3rem));
margin: 0 auto;
padding: clamp(2rem, 6vw, 4.5rem) 0;
}
h1,
h2,
h3,
p {
margin: 0;
}
a {
color: var(--blue);
text-underline-offset: 0.25em;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 4px;
}
.eyebrow {
color: var(--blue);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
}
h1 {
font-size: clamp(2.3rem, 6vw, 4.2rem);
letter-spacing: -0.055em;
line-height: 1.08;
max-width: 15ch;
overflow-wrap: anywhere;
}
.intro {
color: var(--muted);
font-size: 1rem;
max-width: 40rem;
margin-top: 1.3rem;
}
.footer-note {
margin-top: 2.5rem;
border-top: 1px solid var(--line);
padding-top: 1.25rem;
color: var(--muted);
font-size: 0.8rem;
}
[hidden] {
display: none !important;
}
@media (max-width: 420px) {
main {
width: calc(100% - 2rem);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation: none !important;
transition: none !important;
}
}
.search-header {
display: grid;
grid-template-columns: 1fr 0.8fr;
align-items: end;
gap: 2rem;
margin-bottom: 2.2rem;
}
.search-header h1 {
margin-top: 1.1rem;
}
.search-header .intro {
margin: 0;
max-width: 26rem;
}
.search-panel {
background: var(--white);
border: 1px solid var(--line);
border-radius: 0.9rem;
padding: 1.4rem;
box-shadow: 0 5px 18px #142e5a06;
}
.search-panel label {
font-size: 0.8rem;
font-weight: 700;
display: block;
margin-bottom: 0.55rem;
}
.search-row {
display: flex;
gap: 0.65rem;
align-items: stretch;
}
input {
font: inherit;
min-width: 0;
width: 100%;
min-height: 3rem;
border: 1px solid #8795a9;
border-radius: 0.4rem;
padding: 0.7rem 0.9rem;
color: var(--ink);
background: var(--paper);
}
input::placeholder {
color: #657183;
opacity: 1;
}
button {
font: inherit;
border: 1px solid #8795a9;
border-radius: 0.4rem;
min-height: 3rem;
padding: 0.65rem 1rem;
background: var(--white);
color: var(--ink);
cursor: pointer;
font-size: 0.85rem;
font-weight: 700;
}
button:hover {
background: var(--soft);
border-color: var(--blue);
color: var(--blue);
}
.search-help {
color: var(--muted);
font-size: 0.78rem;
margin-top: 0.8rem;
}
.results-bar {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.7rem;
margin: 1.7rem 0 1rem;
color: var(--muted);
font-size: 0.8rem;
}
.local-badge {
color: #376143;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.local-badge::before {
content: '';
width: 0.4rem;
height: 0.4rem;
background: #376143;
border-radius: 50%;
}
.results {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: 1rem;
}
.result {
min-width: 0;
padding: 1.5rem;
border: 1px solid var(--line);
background: var(--white);
border-radius: 0.75rem;
}
.result-tag {
color: var(--blue);
background: var(--soft);
padding: 0.2rem 0.5rem;
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 0.2rem;
}
.result h2 {
font-size: 1.13rem;
line-height: 1.4;
letter-spacing: -0.02em;
margin-top: 1rem;
overflow-wrap: anywhere;
}
.result p {
color: var(--muted);
font-size: 0.85rem;
margin-top: 0.65rem;
}
.empty {
text-align: center;
border: 1px dashed #9daabc;
border-radius: 0.75rem;
padding: 3rem 1.5rem;
background: #ffffff70;
}
.empty h2 {
font-size: 1.45rem;
letter-spacing: -0.03em;
}
.empty p {
color: var(--muted);
font-size: 0.9rem;
max-width: 32rem;
margin: 0.7rem auto 0;
}
.no-script {
padding: 1rem;
background: #fff0d5;
color: #63401a;
border: 1px solid #c3a778;
margin-bottom: 1rem;
}
@media (max-width: 700px) {
.search-header {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
@media (max-width: 380px) {
.search-panel {
padding: 1rem;
}
.search-row {
flex-wrap: wrap;
}
.search-row button {
width: 100%;
}
}
</style>
</head>
<body>
<main>
<header class="search-header">
<div>
<p class="eyebrow">MRHTML / Pattern library</p>
<h1>Find your next good idea.</h1>
</div>
<p class="intro">
A compact collection of interface notes. Search locally by title,
category, or description. Your words stay in this page.
</p>
</header>
<noscript
><p class="no-script">
This local search needs JavaScript. Enable it to browse and filter the
bundled sample patterns. No network request or account is needed.
</p></noscript
>
<div class="search-panel">
<label for="pattern-search">Search the pattern library</label>
<div class="search-row">
<input
id="pattern-search"
type="search"
placeholder="Try grid, focus, or C++"
autocomplete="off"
spellcheck="false"
aria-describedby="search-help"
/><button id="clear-search" type="button">Clear</button>
</div>
<p id="search-help" class="search-help">
Results update after a short typing pause. Punctuation is treated as
ordinary text.
</p>
</div>
<div class="results-bar">
<p id="search-status" role="status">Preparing the local library.</p>
<span class="local-badge">12 notes, stored in this page</span>
</div>
<section
id="search-results"
class="results"
aria-label="Matching pattern notes"
></section>
<div id="search-empty" class="empty" hidden>
<h2>No matching notes.</h2>
<p>
Try a shorter word, another category, or Clear to return to the
complete MRHTML sample library.
</p>
</div>
<footer class="footer-note">
An original MRHTML example. A 250 ms debounce, literal text matching,
and no external requests.
</footer>
</main>
<script>
// MRHTML: search only the local authored dataset. Never interpret input as HTML or regex.
const patterns = [
{
title: 'A responsive card grid',
category: 'CSS layout',
description:
'Use auto-fit and minmax to give cards room at every screen width.',
},
{
title: 'A native details FAQ',
category: 'HTML interaction',
description:
'Useful answers with browser-managed disclosure and keyboard controls.',
},
{
title: 'Visible focus with :focus-visible',
category: 'CSS accessibility',
description:
'Make the current keyboard target easy to spot without hiding its outline.',
},
{
title: 'A quieter motion preference',
category: 'CSS accessibility',
description:
'Respect prefers-reduced-motion when adding transitions or animations.',
},
{
title: 'C++ and JavaScript reading notes',
category: 'Content',
description:
'Punctuation in a title is ordinary text, including the two plus signs in C++.',
},
{
title: 'Literal <angle brackets>',
category: 'Content safety',
description:
'Render content with textContent so markup-like text stays text.',
},
{
title: 'A search that waits for you',
category: 'JavaScript interaction',
description:
'Debounce local filtering and preserve input method composition.',
},
{
title: 'Labels before placeholders',
category: 'HTML forms',
description:
'Use a persistent label to explain the purpose of each input.',
},
{
title: 'A comfortable reading width',
category: 'CSS typography',
description:
'Keep long paragraphs readable with a measured line length and flexible spacing.',
},
{
title: 'Clear error and empty states',
category: 'Content',
description:
'Explain what happened and give readers a practical next step.',
},
{
title: 'MRHTML sample page structure',
category: 'HTML semantics',
description:
'Organize a page with a clear main region, logical headings, and meaningful links.',
},
{
title: 'A helpful status message',
category: 'JavaScript accessibility',
description:
'Announce the result count politely after filtering, without moving keyboard focus.',
},
];
const input = document.getElementById('pattern-search');
const clearButton = document.getElementById('clear-search');
const results = document.getElementById('search-results');
const status = document.getElementById('search-status');
const empty = document.getElementById('search-empty');
let timer;
let composing = false;
function renderResults(value) {
const query = value.trim().toLowerCase();
const matches = patterns.filter((pattern) =>
`${pattern.title} ${pattern.category} ${pattern.description}`
.toLowerCase()
.includes(query),
);
const cards = matches.map((pattern) => {
const card = document.createElement('article');
card.className = 'result';
const tag = document.createElement('span');
tag.className = 'result-tag';
tag.textContent = pattern.category;
const title = document.createElement('h2');
title.textContent = pattern.title;
const description = document.createElement('p');
description.textContent = pattern.description;
card.append(tag, title, description);
return card;
});
results.replaceChildren(...cards);
results.hidden = matches.length === 0;
empty.hidden = matches.length !== 0;
status.textContent = `${matches.length} of ${patterns.length} ${matches.length === 1 ? 'note' : 'notes'} shown.`;
}
function scheduleSearch() {
clearTimeout(timer);
timer = setTimeout(() => {
if (!composing) renderResults(input.value);
}, 250);
}
input.addEventListener('compositionstart', () => {
composing = true;
clearTimeout(timer);
});
input.addEventListener('compositionend', () => {
composing = false;
scheduleSearch();
});
input.addEventListener('input', (event) => {
if (composing || event.isComposing) {
clearTimeout(timer);
return;
}
scheduleSearch();
});
clearButton.addEventListener('click', () => {
clearTimeout(timer);
composing = false;
input.value = '';
renderResults('');
input.focus();
});
renderResults('');
</script>
</body>
</html>