Search-it

jQuery plugin that makes any block of content searchable by filtering the content

View project on GitHub

Generic usage

To get the Search-it plugin working just need to include jQuery and the Search-It plugin 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="search-it.js"></script>
$('#container').searchIt({
    itemSelector: 'p',
    inputLabelValue : 'Looking for something?'
});

Materialize.css Collapsible Usage

To get the Search-it plugin working with Matrialize Collapsible component you need to additionally include Materialize css and js. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
$('#container').searchIt({
    useMaterializeCollapsible: true,
    headerIdentifier: '.collapsible-header',
    itemSelector : '.collapsible-body a'
});

Materialize.css Collapsible Example

Collection example

Table example

234444 Social networks
334305 Marketing through content
200304 Business intelligence

Available options

Attribute Type Default Description
inputLabelValue String 'Search' Search box input label
itemSelector string 'p' Selector of the elements containing text which will be filtered
searchTemplate String 
<div class="input-field">
 <label for="search-#container-id">Search</label>
 <input type="text" id="search-#container-id">
</div>
 Default input element that will be created above the container that is being filtered. It will be ignored it $searchInput is specified
$searchInput jQuery Object null You can use an input box defined directly in the HTML by supplying the jQuery object e.g
$('#my search > input')
useMaterializeCollapsible Boolean false Set to true in case you want to use Materialize.css collapsible component
headerIdentifier: String '.collapsible-header' This attribute is taken into account only when useMaterializeCollapsible is set to true. It defines a custom selector for the Materialize collapsible-header component