Filters¶
Searching and filtering are essential functions for displaying database content. In Airmad filtering records is pretty straight forward. The following example demonstrated the basic idea:
<form action="">
<input type="text" name="Name" value="@{ ?Name }">
<input type="text" name="Type" value="@{ ?Type }">
</form>
<ul>
<@ Airmad/Airmad {
base: 'appXXXXXXXXXXXXXX',
table: 'Products',
view: 'Grid view',
linked: 'Type',
template: '<li>{{ Name }}</li>',
filters: 'Name, Type',
limit: 20,
page: @{ ?Page | def(1) }
} @>
</ul>
In the snippet above, we have a simple form at the top including two input fields
with the names Name
and Type
. The Airmad instance below that form has those names defined as filters
as you
can see in the highlighted line. Note that since in this example Type is a linked table, defining the linked
parameter
allows for searching in linked records as well.
Autocompletion¶
To enhance the user experience for your visitors, you might want to provide an autocompletion list of Type names
for the second input field. You can simply use a second Airmad instance to pull all type names from the Type table and
populate such a list with the Name
field of each record. In the following example we use a datalist for such purpose.
Warning
Note in the snippet below that this time the prefix parameter must be set to a unique value to avoid conflict between both Airmad instances.
<form action="">
<input type="text" name="Name" value="@{ ?Name }">
<input type="text" list="types" name="Type" value="@{ ?Type }">
<@ Airmad/Airmad {
base: 'appXXXXXXXXXXXXXX',
table: 'Types',
view: 'Grid view',
template: '<option value="{{ Name }}">',
prefix: ':type'
} @>
<datalist id="types">
@{ :typeOutput }
</datalist>
</form>
<ul>
<@ Airmad/Airmad {
base: 'appXXXXXXXXXXXXXX',
table: 'Products',
view: 'Grid view',
linked: 'Type => Types',
template: '<li>{{ Name }}</li>',
filters: 'Name, Type',
limit: 20,
page: @{ ?Page | def(1) }
} @>
</ul>