rg-search
v0.0.7
Published
Singlepage search library
Downloads
6
Maintainers
Readme
Installation
npm install rg-search
Usage
var travelSearch = new RGsearch(name, options);
rg-search does not care about what kind of elements or methods you use to apply filters to the search. The only thing it cares about is reading the filter keys and values from the elemens containing these. rg-search will work the these data attributes
- data-rgsearch-filter-keys
- data-rgsearch-filter-values
Your initial markup should contain the data-attributes with the initial values eg:
<ul class="rgsearch-filter" data-rgsearch-filter-keys="key1, key2" data-rgsearch-filter-values="value1, value2">
<li>
<input type="checkbox" onclick="travelSearch.applyFilters(['key1', 'key2'], ['value2', 'value1'])"> <span>Value 1</span>
<input type="checkbox" onclick="travelSearch.applyFilters(['key1', 'key2'], ['value1', 'value2'])"> <span>Value 2</span>
</li>
</ul>
This elements will be selected by the classname rgsearch-filer
.
So you MUST apply this classname to whatever element also containing the filter data attributes.
To change the filters so that the search will update, you just call the applyFilters method, wil two arrays as parameters. The first array should be the filter-keys to update, and the last array should be the values to update to. The two array MUST be in the same order to work properly. You dont need to call the applyFilter method from onclick in the markup. It can just as well be used from inside any javascript you use to control your search-app. eg:
element.on("click", function() {
travelSearch.applyFilters(["key1", "key2"], ["value1", "value2"]);
});