Active Search

Demo
First NameLast Name
EldaReynolds
TreverVeum
XavierNolan
CelestinoSchuppe
ClementinaHarvey
JackySchultz
MaximusSchultz
TerrillMaggio
WilhelmineKautzer
RosannaNicolas

Explanation #

This example actively searches a contacts database as the user enters text.

The interesting part is the input field:

1<input
2    type="text"
3    placeholder="Search..."
4    data-bind:search
5    data-on:input__debounce.200ms="@get('/examples/active_search/search')"
6/>

The input issues a GET to /active_search/search with the input value bound to $search. The __debounce.200ms modifier ensures that the search is not issued on every keystroke, but only after the user has stopped typing.