Skip to content

Commit 4abb9e1

Browse files
author
Aditya Shedge
committed
updated README
- fixed 'Filter with Pagination' link
1 parent 34d1ff5 commit 4abb9e1

1 file changed

Lines changed: 53 additions & 61 deletions

File tree

‎README.md‎

Lines changed: 53 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
# Filter.js
22

3-
Filter.js is client-side JSON objects filter and render html elements.
4-
Multiple filter criteria can be specified and used in conjunction with
5-
each other.
3+
Filter.js is client-side JSON objects filter which can render html elements. Multiple filter criteria can be specified and used in conjunction with each other.
64

75
## Usage
86

9-
Basic requirement to implement filtering using filter.js are JSON data, View template and filter criteria.
7+
Basic requirement to implement filtering using filter.js are JSON data, a 'View' template and a filter criteria.
108

119
### Filter Initialisation
1210

13-
It takes three arguments one is movies, second is container in which html element going to append, third one is options. Options must have template element selector.
14-
Others are in options like criteria, callbacks, search.
11+
It takes three arguments one is movies, second is 'container' in which html elements are to be to appended and the third one is options.
12+
You can set options such as template, criteria, callbacks and search but only `template` is compulsory.
1513

1614
```javascript
1715
var FJS = FilterJS(movies, '#movies', {
@@ -24,12 +22,13 @@ var FJS = FilterJS(movies, '#movies', {
2422
});
2523
```
2624

27-
To append in each item in different container use option `appendToContainer`. This option is a function with two arguments, one is html element content and second is record object.
25+
To append each item in different container use option `appendToContainer`.
26+
This option is a function with two arguments, one is html element content and second is record object.
2827

2928
```javascript
3029

3130
//This will append elements to specific year.
32-
var appendFn = function(html_ele, record){
31+
var appendFn = function(html_ele, record) {
3332
$("#" + record.year).append(html_ele);
3433
}
3534

@@ -41,7 +40,7 @@ var FJS = FilterJS(movies, '#movies', {
4140

4241
### JSON data
4342

44-
Capture the JSON data (maybe using @movies.to_json). i.e
43+
Capture the JSON data (maybe using @movies.to_json).
4544

4645
```javascript
4746
var movies = [
@@ -69,7 +68,7 @@ Capture the JSON data (maybe using @movies.to_json). i.e
6968

7069
### View
7170

72-
Rendering JSON objects requires a view template. In filter.js micro-templating module inspired by Underscore.js.
71+
Rendering JSON objects requires a view template. The micro-templating module in filter.js is inspired by Underscore.js.
7372

7473
```javascript
7574
<script id="movie-template" type="text/html">
@@ -101,13 +100,14 @@ Rendering JSON objects requires a view template. In filter.js micro-templating m
101100

102101
### Filter Criteria
103102

104-
It required two mandatory options are `field` which is name of any property from JSON data and other is HTML `ele` element on which filter will be trigger by click,change etc events.
105-
Other options are filter `type`, `event` and `selector`.
103+
The two mandatory options required are `field` which is name of any property from JSON data and other is HTML `ele` element on which filter will be triggered by an event(e.g. click, change, etc.).
104+
Other filter options are `type`, `event` and `selector`.
106105

107-
- filter `type`, by default it is equal but if you want to search in range you can set it `range`. For `range` html element value should be in format of `val1-val2`. i.e `100-200`.
108-
- `delimiter`, by default hyphen '-' is used as range separator `val1-val2`. If you want to use a different separator (if data contains hyphen e.g: ' 2012-02-02 ') it can be specified using `delimiter: ','` and html element value should be in format `val1<delimiter>val2`. i.e.`2012-02-02,2015-02-02`.
109-
- `event` by default for checkbox, radio button is `click`, for text input, select box is `change`.
110-
- `selector` by default for checkbox and radio button is `:checked`, for input field `input` and for select box is `select`.'#genre_criteria input:checkbox' will collect the checkboxes values in html element with `id="genre_criteria"`
106+
- filter `type`: by default it is equal but if you want to search within a range you can set it to `range`.
107+
For `range`, html element value should be in format of `val1-val2`(e.g. `100-200`).
108+
By default hyphen '-' is used as `delimiter` or range separator `val1-val2`. If you want to use a different separator (if data contains hyphen e.g: '2012-02-02') it can be specified using `delimiter: ','` and html element value should be in format `val1<delimiter>val2`. i.e.`2012-02-02,2015-02-02`.
109+
- `event` by default for checkbox and radio button is `click` and for text input and select box it is `change`.
110+
- `selector` by default for checkbox and radio button is `:checked`, for input field is `input` and for select box is `select`. '#genre_criteria input:checkbox' will collect the checkboxes values in html element with `id="genre_criteria"`
111111
- `all` option : if selected values of specific filter criteria contains `all` option value then all record selected for that criteria.
112112

113113
There are two way to add criteria. One is add at time of filter object initialisation and other is add when required.
@@ -136,20 +136,19 @@ There are two way to add criteria. One is add at time of filter object initialis
136136
137137
More detail for `range` filter. It is expected to set ranges as values like '20-30'
138138
139-
Example:
139+
Example:
140140
141141
```html
142142
<input checked="checked" value="20-30" type="checkbox">
143143
```
144144
145-
For nested field selection. In below object to select filter on name `field` option value would be `detail.name`, for city `detail.address.city`.
145+
**For nested field selection**: In the below object, to select filter on name `field` option value would be `detail.name` and for city `detail.address.city`.
146146
147147
JSON object:
148148
149149
```json
150-
151150
{
152-
detail: { name: 'Jiren', address: {city: 'Pune'} }
151+
detail: { name: 'Jiren', address: { city: 'Pune' } }
153152
}
154153
```
155154
@@ -165,40 +164,38 @@ fjs.removeCriteria('year')
165164
166165
Define callback in settings. Callbacks execute on different events.
167166
168-
- `beforeAddRecords` : Trigger before adding records to filter.
169-
- `afterAddRecords`
170-
- `beforeRender` : Trigger before rendering going to call.
171-
- `beforeRecordRender` : Trigger for each JSON object record at time of rendering.
172-
- `afterFilter` : Trigger after filtering event.
167+
- `beforeAddRecords` : Triggered before adding records to filter.
168+
- `afterAddRecords` : Triggered after all records are added.
169+
- `beforeRender` : Triggered before rendering going to call.
170+
- `beforeRecordRender` : Triggered for each JSON object record at time of rendering.
171+
- `afterFilter` : Triggered after filtering event.
173172
174173
i.e.,
175174
176175
```javascript
177-
178-
var filter_callbacks = {
179-
beforeAddRecords: function(records){
180-
// Process new JSON data records.
181-
// i.e Process data before adding to filter while streaming.
182-
},
183-
afterAddRecords: function(records){
184-
// i.e Update google markers or update sorting.
185-
},
186-
beforeRender: function(records){
176+
var filter_callbacks = {
177+
beforeAddRecords: function(records){
178+
// Process new JSON data records.
179+
// i.e Process data before adding to filter while streaming.
180+
},
181+
afterAddRecords: function(records){
182+
// i.e Update google markers or update sorting.
183+
},
184+
beforeRender: function(records){
187185
//
188-
},
189-
beforeRecordRender: function(record){
186+
},
187+
beforeRecordRender: function(record){
190188
//i.e Add/Update record fields
191-
},
192-
afterFilter: function(result){
193-
// i.e Update result counter, update google map markers.
194-
}
195-
};
189+
},
190+
afterFilter: function(result){
191+
// i.e Update result counter, update google map markers.
192+
}
193+
};
196194
```
197195
198196
#### Init Filter object with above callbacks
199197
200198
```javascript
201-
202199
var fjs = FilterJS(movies, '#movies', {
203200
template: '#movie-template',
204201
callbacks: filter_callbacks
@@ -212,41 +209,36 @@ var fjs = FilterJS(movies, '#movies', {
212209
213210
### Instant Search integration
214211
215-
For search needed textbox element selector. By default search will work on all JSON object fields. If needed search in particular fields then set `fields` option.
212+
To enable search, add a textbox element and set the selector in options. By default search will work on all JSON object fields. If you want to search on some particular fields then set the `fields` option.
216213
217214
```javascript
215+
// Init with search
216+
FilterJS(movies, '#movies', {
217+
template: '#movie-template',
218+
search: { ele: '#searchbox' } // Search in all fields of JSON object.
219+
}
218220

219-
// Init with search
220-
FilterJS(movies, '#movies', {
221-
template: '#movie-template',
222-
search: {ele: '#searchbox'} // Search in all fields of JSON object.
223-
}
224-
225-
// Search in given fields
226-
227-
search: {ele: '#searchbox', fields: ['name', 'runtime']}
228-
221+
// Search in given fields
222+
search: { ele: '#searchbox', fields: ['name', 'runtime'] }
229223
```
230224
231-
Default search will trigger after 2 char. This can be configured using `start_length` option.
225+
The search will trigger after 2 characters by default. This can be configured using `start_length` option.
232226
233227
```javascript
234-
235-
search: {ele: '#searchbox', fields: ['name', 'runtime'], start_length: 4 }
228+
search: {ele: '#searchbox', fields: ['name', 'runtime'], start_length: 4 }
236229
```
237230
238-
Default search will start searching immediately after user types. A timeout can be configured using `timeout` option (in milliseconds).
231+
By default search will start immediately after a user types. A timeout can be configured using `timeout` option (in milliseconds).
239232
240233
```javascript
241-
search: {ele: '#searchbox', fields: ['name', 'runtime'], timeout: 100 }
234+
search: {ele: '#searchbox', fields: ['name', 'runtime'], timeout: 100 }
242235
```
243236
244237
## Add more data to existing filter
245238
246239
If you are streaming JSON data using ajax then you can add data like this
247240
248241
```javascript
249-
250242
var fjs = FilterJS(movies, '#movies', { template: '#movie-template'})
251243

252244
fJS.addData(data)
@@ -322,7 +314,7 @@ To see the sample demo, clone this repo and open demo/filterjs.html in your brow
322314
323315
[Filter - Google Map](http://jiren.github.io/filter.js/map.html)
324316
325-
[Filter with Pagination] (http://jiren.github.io/filter.js/pagination.html)
317+
[Filter with Pagination](http://jiren.github.io/filter.js/pagination.html)
326318
327319
## Used by
328320

0 commit comments

Comments
 (0)