Search

Automatic Search

Automatic search updates the matching results while the reader types or changes filters, while still keeping the URL-based search form.

Turn It On#

Add auto to the search tag:

phpresources/views/front-page.php
{{ search auto }}  <input type="search" placeholder="Search posts">  <button>Search</button>{{ /search }}{{ query:posts search }}  <article>    <h2><a href="{{ url }}">{{ title }}</a></h2>  </article>{{ /query:posts }}

TemplateX connects the form to the matching query results and swaps the results after the URL changes.

The matching query keeps its authored layout. Automatic search uses non-rendering result markers, so a query inside a grid or flex container still leaves each rendered item as a direct child of that container.

Delay#

The default delay is 300 milliseconds. Change it with delay or debounce:

php
{{ search auto delay="450" }}  <input type="search" placeholder="Search">  <button>Search</button>{{ /search }}

Use a slightly longer delay when the page has expensive queries.

Search forms that contain {{ filter:* }} controls are enhanced automatically, because changing a filter should refresh the matching results.

php
{{ search }}  <input type="search" placeholder="Search">  {{ filter:category type="select" }}{{ /search }}

The form still uses normal GET parameters, so the filtered URL can be shared or refreshed. See Search Filters for the filter syntax.