Creates a search filter that is applied to the specified selector's child elements.
Download jquery.searchify.js and jquery-searchify.css.
Include the plugin CSS and JavaScript, updating the path:
<link rel="stylesheet" href="/path/to/jquery-searchify.css">
<script type="text/javascript" src="/path/to/jquery.searchify.js"></script>Create some HTML with child elements to be searched/filtered:
<ul class="example-1">
<li>Searchable text</li>
<li>More searchable text</li>
<li>Even more searchable text</li>
</ul>
<div class="example-2">
<p>Searchable text</p>
<p>More searchable text</p>
<p>Even more searchable text</p>
</div>Apply Searchify to the elements:
<script type="text/javascript">
jQuery(function($) {
$('.example-1').searchify();
$('.example-2').searchify({
label: 'Filter List:',
matches: function(matches, search_terms) {
// Do something with the matches
console.log('Found ' + matches.length + ' results for "' + search_terms + '"');
}
});
});
</script>All options specified and demonstration of function triggers and callbacks.
Once instantiated with $.searchify(), it's possible to call methods and manipulate the instance.
label | Label for the search input. False for none. Default: "Search:" |
|---|---|
min_chars | Search will not run unless at least this many characters are typed. Default: 3 |
typing_threshold | Delay in milliseconds used to determine whether user is finished typing. Default: 350 |
search_location | Where to place the search form(s). Possible values: "before", "after", "both", [jQuery Object]. If a jQuery Object is passed, the form will be appended inside it. Default: "before" |
active_class | Class applied to the selected element when plugin is activated. Default: "searchify" |
match_class | Class applied to items that match the search terms. Default: "searchify-match" |
no_matches_class | Class applied to the selected element when there are no search results. Default: "searchify-no-results" |
form_class | Class applied to the search container form. Default: "searchify-form" |
label_template | HTML string or jQuery object used to render the form label. Default: "<label>" |
input_template | HTML string or jQuery object used to render the form label. Default: "<input type="search">" |
wrap_label | Boolean value that determines whether the label will wrap the input ( true), or be placed before the input (false). Default: true |
item_filter | A jQuery selector to be passed to $.filter(). This filters the items that will be included in the search. For example, if set to ":not(.this-class)", then elements with class this-class will not be included. By default, those items will be hidden by Searchify's included CSS. Default: "*" |
form_input | jQuery Object used to override the built-in form generation. If specified, then the input(s) matched by this selector will be used for the search, and the input_template, label_template, and search_location options are ignored. Default: null |
item_text() | (callback function) - Used to specify exactly how to get the searchable text from the items. Function's "this" context is the root of the individual item being searched. The default behavior is to search all the text in the item -- return this.text(). Example 2 uses a custom method of retrieving the text to search. |
rendered() | (callback function) - Called after the plugin is finished rendering to the page. Function's "this" context is the plugin instance. |
search_init | (callback function) - Called before search logic begins, and when the search is cleared/reset. Function's "this" context is the plugin instance. The default behavior is to remove the "No results" message, if one is present. |
matches(matches, | (callback function) - Called after a search only if there are matches. A jQuery Object of matches and the search_terms are available in the arguments. Function's "this" context is the plugin instance. |
no_matches | (callback function) - Called after a search only if there are no matches. The search_terms are available in the arguments. Function's "this" context is the plugin instance. Default behavior is to insert a div before the element that says "No results for [search_terms]". The div is removed by the search_init before another search is run. |
search_complete() | (callback function) - Called when the search is complete, whether or not there were matches. Function's "this" context is the plugin instance. |
destroyed() | (callback function) - Called after the plugin is destroyed. Function's "this" context is the plugin instance. Default behavior is to remove any "no results" message. |