You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+33-60Lines changed: 33 additions & 60 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,18 +1,14 @@
1
-
Filter.js
2
-
=============
1
+
# Filter.js
3
2
4
3
Filter.js is client-side JSON objects filter and render html elements.
5
4
Multiple filter criteria can be specified and used in conjunction with
6
5
each other.
7
6
8
-
9
-
Usage
10
-
-----
7
+
## Usage
11
8
12
9
Basic requirement to implement filtering using filter.js are JSON data, View template and filter criteria.
13
10
14
11
### Filter Initialisation
15
-
-------------------------
16
12
17
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.
18
14
Others are in options like criteria, callbacks, search.
@@ -28,8 +24,7 @@ var FJS = FilterJS(movies, '#movies', {
28
24
});
29
25
```
30
26
31
-
To append in each item in different container use option `appendToContainer`. This option is a function with two arguments
32
-
one is html element content and second is record object.
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.
33
28
34
29
```javascript
35
30
@@ -45,7 +40,6 @@ var FJS = FilterJS(movies, '#movies', {
45
40
```
46
41
47
42
### JSON data
48
-
-------------
49
43
50
44
Capture the JSON data (maybe using @movies.to_json). i.e
51
45
@@ -74,10 +68,8 @@ Capture the JSON data (maybe using @movies.to_json). i.e
74
68
```
75
69
76
70
### View
77
-
--------
78
-
79
-
To render each json object require view template. In filter.js micro-templating module inspired by Underscopre.js.
80
71
72
+
Rendering JSON objects requires a view template. In filter.js micro-templating module inspired by Underscore.js.
81
73
82
74
```javascript
83
75
<script id="movie-template" type="text/html">
@@ -108,17 +100,17 @@ To render each json object require view template. In filter.js micro-templating
108
100
```
109
101
110
102
### Filter Criteria
111
-
-------------------
112
103
113
-
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.
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.
114
105
Other options are filter `type`, `event` and `selector`.
106
+
115
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`.
116
-
-`delimiter`, by default hyphen '-' is used as range seperator`val1-val2`. If you want to use a different seperator (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`.
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`.
117
109
-`event` by default for checkbox, radio button is `click`, for text input, select box is `change`.
118
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"`
119
111
-`all` option : if selected values of specific filter criteria contains `all` option value then all record selected for that criteria.
120
112
121
-
There are two way to add criteria one is add at time of filter object initialisation and other one is add when required
113
+
There are two way to add criteria. One is add at time of filter object initialisation and other is add when required.
122
114
123
115
```javascript
124
116
//On create
@@ -139,7 +131,8 @@ There are two way to add criteria one is add at time of filter object initialisa
139
131
```
140
132
141
133
**field**: `genre` this is a JSON attribute defined in JSON objects.
142
-
For Range selections,
134
+
135
+
#### For Range selections
143
136
144
137
More detail for `range` filter. It is expected to set ranges as values like '20-30'
145
138
@@ -151,7 +144,7 @@ More detail for `range` filter. It is expected to set ranges as values like '20-
151
144
152
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`.
153
146
154
-
Json object:
147
+
JSON object:
155
148
156
149
```json
157
150
@@ -168,24 +161,23 @@ Using `removeCriteria`, remove criteria dynamically. It take one argument `filed
168
161
fjs.removeCriteria('year')
169
162
```
170
163
171
-
### Filtering Callbacks
172
-
-------------------
164
+
#### Filtering Callbacks
173
165
174
166
Define callback in settings. Callbacks execute on different events.
175
167
176
168
- `beforeAddRecords` : Trigger before adding records to filter.
177
169
- `afterAddRecords`
178
170
- `beforeRender` : Trigger before rendering going to call.
179
-
- `beforeRecordRender` : Trigger for each json object record at time of rendering.
171
+
- `beforeRecordRender` : Trigger for each JSON object record at time of rendering.
180
172
- `afterFilter` : Trigger after filtering event.
181
173
182
-
i.e
174
+
i.e.,
183
175
184
176
```javascript
185
177
186
178
var filter_callbacks = {
187
179
beforeAddRecords:function(records){
188
-
// Process new json data records.
180
+
// Process new JSON data records.
189
181
// i.e Process data before adding to filter while streaming.
190
182
},
191
183
afterAddRecords:function(records){
@@ -203,7 +195,7 @@ i.e
203
195
};
204
196
```
205
197
206
-
Init Filter object with above callbacks
198
+
#### Init Filter object with above callbacks
207
199
208
200
```javascript
209
201
@@ -218,18 +210,16 @@ var fjs = FilterJS(movies, '#movies', {
218
210
});
219
211
```
220
212
221
-
222
213
### Instant Search integration
223
-
---------------------------
224
214
225
-
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.
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.
226
216
227
217
```javascript
228
218
229
219
// Init with search
230
220
FilterJS(movies, '#movies', {
231
221
template:'#movie-template',
232
-
search: {ele:'#searchbox'} // Search in all fields of json object.
222
+
search: {ele:'#searchbox'} // Search in all fields of JSON object.
233
223
}
234
224
235
225
// Search in given fields
@@ -251,11 +241,9 @@ Default search will start searching immediately after user types. A timeout can
0 commit comments