Skip to main content

contentSearch

This module provides several data attributes that can be used to search content on the page. To use the module, import it and initialize like so.

import { contentSearch } from '@javaabu/js-utilities';

contentSearch.init();

You can also manually bind contentSearch on an arbitary element using the bind() method. The argument to the bind() method must be a jQuery object. This can be useful for binding conditionalDisplay on dynamic elements.

import { contentSearch } from '@javaabu/js-utilities';

contentSearch.bind($('.some-element'));

Filters list items matching the typed search query. Must be used on the search input. This feature accepts the following data attributes:

  • data-filter-links: (Required) The selector pointing to which elements to search.
  • data-search-elem: Which elements to search from within the element to search. Defaults to li.
<input type="text" data-filter-links="#some-items" data-search-elemt=" li">

<ul id="some-items">
    <li>
        <a href="#">Apple</a>
    </li>
    <li>
        <a href="#">Orange</a>
    </li>
</ul>

data-filter-checkboxes​

Filters checkboxes matching the typed search query. Must be used on the search input. This feature accepts the following data attributes:

  • data-filter-checkboxes: (Required) The selector pointing to which elements to search.
  • data-search-elem: Which elements to search from within the element to search. Defaults to > .checkbox.
<input type="text" data-filter-links="#some-items" data-search-elemt=" li">

<div id="some-items">
    <div class="checkbox">
        <label>
            <input type="checkbox" name="fruits[]" value="apple">
            Apple
        </label>
    </div>
    
    <div class="checkbox">
        <label>
            <input type="checkbox" name="fruits[]" value="orange">
            Orange
        </label>
    </div>
</div>