Live search (incremental)

This example filters a small list of items as you type. The search text lives in data.q, and the list is rendered with *for. A simple condition hides items that do not match.

Code

<serc-rod data='{
	"q": "",
	"items": [
		"Getting started guide",
		"Directives reference",
		"Playground examples",
		"Integration notes",
		"SSG / SSR setup"
	]
}'>
	<section>
		<label>
			Search:
			<input type="search" *input="q" placeholder="Type to filter...">
		</label>
		<p *if="!q">Start typing to filter the list.</p>
		<ul>
			<li *for="item of items"
				*if="!q || item.toLowerCase().indexOf(q.toLowerCase()) !== -1">
				%item%
			</li>
		</ul>
	</section>
</serc-rod>

Sample