Filtering data with < input >, < select > & URLSearchParams
Make easy way for filtering data with URLSearchParams & different types of inputs, selects.
Example
A simple demo of usage filter-dom-url
See the code of an example - HTML, JS
Overview
Supported DOM elements types
For tag input
:
<input type="...">
- ['checkbox', 'radio', 'color', 'range', 'date', 'month', 'week', 'time']
For tag select
:
<select>
& <select multiple>
HTML structure
Minimal structure for filter-dom-url
initializing:
<form data-filter-form="form-example">
<input value="value-example" data-filter="type-example" type="checkbox">
</form>
Install
Install package from npm and import:
import Filter from '@kassaila/filter-dom-url';
or copy file or file.min to your project and import:
import Filter from 'dist/filter-dom-url';
Usage
Create Filter
instance:
const filterExample = new Filter({
formAttr: 'data-filter-form="form-example"',
filterAttr: 'data-filter',
});
API
Parameter | Type | Arguments | Description |
---|---|---|---|
init() | function | - | Instance initialization |
updateDom() | function | - | Update DOM elements (filters) from URL |
setFiltersToUrl(newUrl) | function | newUrl - object (URL prototype). Base page URL, you can set from window.location | Set URLSerchParams to your page URL |
getFilters() | function | - | Get object with filters data - { filter-type: ['filter-value'] } |