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>
		<serc-rod>
			<ul>
				<li *for="
					item of items.filter(function(item){
						return !q || item.toLowerCase().indexOf(q.toLowerCase()) !== -1;
					})
				">%item%</li>
			</ul>
		</serc-rod>
	</section>
</serc-rod>

Sample