So far, we have built filters that search for content when the criteria form is submitted. It is possible to trigger a search to be made in other ways.
If you add the sift-update-on-change class to the Sift outer <div> then the search will be triggered whenever a field is changed.
In the case of text fields, the search will be triggered when the field loses focus (for example, when the user tabs off). This can be changed to trigger when individual characters are entered by specifying a data-sift-min-change-letters attribute on the criterion element. The value of the attribute will specify the minimum number of letters in the field before the search is triggered.
By default, a very short delay (500 milliseconds) occurs when triggering on individual letter changes. This reduces the number of searches done and allows the user to quickly type something without multiple searches being triggered. This delay can be adjusted by using the data-sift-key-press-delay attribute on the criterion element. The value of this attribute will be the number of milliseconds of the delay.
When searching on a letter change, it makes sense to include the sift-wildcard class on the criterion element. This indicates that a wildcard search should be used and to match against part of the words.
@inherits Umbraco.Web.Mvc.UmbracoViewPage
<h1>Search on letter change</h1>
<div class="sift sift-update-on-change"
data-sift-result-document-type="cinemaCento">
<form class="sift-criteria">
@Html.AntiForgeryToken()
<label for="filmName">Name</label>
<input type="text" id="filmName" name="filmName"
class="sift-criterion sift-wildcard"
data-sift-match-property="nodeName"
data-sift-min-change-letters="3"
data-sift-key-press-delay="1000" /> @* One second *@
</form>
<div class="sift-result">
</div>
</div>
<script src="~/Scripts/sift.js" type="text/javascript"></script>
When the page is first loaded into the browser, or when it is refreshed, a new search can be triggered by including the sift-auto-load-on-page-load class on the Sift outer <div> element.
If this class is included then search results will be displayed without the user having to do anything. Typically, this will include all of the relevant content, but this initial search will also take into account any "remembered" criteria. See Remembering Criteria for more details on remembering the criteria across page refreshes.
A search can be triggered from any clickable element that has a sift-search class. The page number to be returned can also be specified using the data-sift-results-page-number attribute on the clickable element.
An example of this can be found in the _SiftDefaultPagination partial view, which demonstrates how different page numbers can be accessed in the search results.
You can specify the criteria as part of the page URL, thus making it possible to provide a direct link to a filter page with certain criteria set. This link can be included in an email or referenced from other sites.
It is likely that the sift-auto-load-on-page-load class will also be used at the same time as using URL parameters (see above), meaning that the results are automatically displayed when the page is loaded.
You specify the parameters in the URL using the id of the criterion field that you want to set. For example:
https://www.example.com/sift-demo?filmName=girl
or
https://www.example.com/product-filter?name=sift&category=web