Live Search

The Code

{# live-search.twig #}

<input type="text" placeholder="Search..."
       data-bind-search
       data-on-input__debounce.200ms="{{ datastar.get('_partials/live-search') }}"
       data-indicator-fetching
/>

{{ include('_partials/live-search.twig') }}

{# _partials/live-search.twig #}

{% set search = signals.search ?? '' %}
{% set entries = craft.entries().search(search).all() %}

<div id="live-search">
	{% if entries|length %}
		{% for entry in entries %}
			<h3>{{ entry.title }}</h3>
		{% endfor %}
	{% endif %}

	{{ entries|length ? 'Results found: ' ~ entries|length : 'No results found' }}
</div>