Skip to content

Commit d6fb7ac

Browse files
author
Jiren Patel
committed
Added live search and filter functionality.
- Updated readme for search option - Updated example: Added search demo
1 parent 4c986c5 commit d6fb7ac

5 files changed

Lines changed: 66 additions & 7 deletions

File tree

‎README.md‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ Filter criteria is defined in the follwing ways:
4646
states: ['#state_list input:checkbox .EVENT.click .SELECT.:checked', 'states.ARRAY.state_id'],
4747
},
4848
callbacks = filter_callbacks, //Define below.
49-
and_filter_on: false
49+
and_filter_on: false,
50+
search: { input: '#searchbox' }
5051
};
5152

5253
The detailed explaination is here:
@@ -87,6 +88,12 @@ then no elements are shown.For 'and_filter_on' => 'false' zero result category i
8788
and_filter_on: true //AND opration
8889
and_filter_on: false //OR Opration
8990

91+
For Live Search,
92+
93+
search: { input: '#searchbox'}
94+
95+
Search option is adding live search from the html elements. 'input' is the jquery element selector for the searchbox.
96+
9097
Filtering Callbacks
9198
-------------------
9299

@@ -210,7 +217,13 @@ View function:
210217
var view = function(person){
211218
return $.tmpl(jquery_template, person)
212219
};
220+
221+
Live Search integration
222+
-----------------------
223+
224+
Add search option in filter setting.
213225

226+
search: {input: '#searchbox'}
214227

215228
Demo
216229
----
@@ -240,6 +253,9 @@ v1.1
240253
v1.2
241254
- Filtering Callbacks
242255

256+
v1.3
257+
- Search with filtering
258+
243259

244260
Contributing
245261
------------

‎examples/asset/css/style.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,4 +153,9 @@ h1, h2, h3, h4, h5, h6, p, ol, ul {
153153
font-family: 'crimson Text', serif;
154154
font-weight: normal;
155155
}
156-
156+
.searchbox{
157+
line-height: 20px;
158+
width: 170px;
159+
height: 20px;
160+
font-size: 15px;
161+
}

‎examples/filterjs.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,12 @@ <h3>View Renderer Types</h3>
3535
</ul>
3636
</div>
3737
</div>
38+
<div class="sidebar_left_find">
39+
<div class="sidebar_list">
40+
<h3>Search</h3>
41+
<input type="text" id="search_box" class="searchbox" placeholder="Search...."/>
42+
</div>
43+
</div>
3844
<div class="sidebar_left_find">
3945
<div class="sidebar_list">
4046
<h3>Filter by Price</h3>

‎examples/filterjs.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ function filterInit(filter_type){
122122

123123
var filter_callbacks = {
124124
logger: function(result){
125-
console.log(result);
125+
//console.log(result);
126126
},
127127

128128
show_result_count: function(result){
@@ -144,6 +144,7 @@ function filterInit(filter_type){
144144
timeleft: ['#timeleft_filter .EVENT.change .SELECT.:input .TYPE.range', 'timeleft'],
145145
link_filter: ['#link_filter .EVENT.change .SELECT.:input .TYPE.range', 'amount']
146146
},
147+
search: {input: '#search_box' },
147148
and_filter_on: true, //If any filter selection is zero then select none. For 'OR' filter set 'false'
148149
callbacks: filter_callbacks //Filter callback execute in filter init and each filtering event.
149150
};

‎filter.js‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
* Filter.js
3-
* version: 1.2 (10/01/2012)
3+
* version: 1.3 (24/08/2012)
44
*
55
* Licensed under the MIT:
66
* http://www.opensource.org/licenses/mit-license.php
@@ -18,6 +18,7 @@
1818
this.view = view;
1919
this.parentNode = parentNode;
2020
this.settings = settings || {};
21+
this.last_result = null;
2122

2223
if (this.dataModel.constructor == Object){
2324
this.dataModel = [this.dataModel];
@@ -40,7 +41,7 @@
4041
return new _filterJS(dataModel, parentNode, view, settings);
4142
};
4243

43-
FilterJS.VERSION = 1.2;
44+
FilterJS.VERSION = 1.3;
4445

4546
//Register new html tag
4647
FilterJS.registerHtmlElement = function(tag_name){
@@ -113,11 +114,18 @@
113114
bindEvents: function() {
114115
var base = this;
115116
base.settings.selector.forEach(function(selector, index) {
116-
$(selector.element).live(selector.events,
117-
function(e) {
117+
$(selector.element).live(selector.events, function(e) {
118118
base.filter();
119119
});
120120
})
121+
122+
if(base.settings.search){
123+
$(base.settings.search.input).live('keyup', function(e){
124+
//var search_result = base.search(this, base.last_result || base.settings.all_objects);
125+
//base.hideShow(search_result);
126+
base.filter();
127+
});
128+
}
121129
},
122130

123131
//Unbind fileter events
@@ -153,10 +161,16 @@
153161

154162
if(select_none && base.settings.and_filter_on) filter_out = [];
155163

164+
//Search
165+
if(base.settings.search){
166+
filter_out = base.search(base.settings.search.input, filter_out);
167+
}
156168
base.hideShow(filter_out);
157169

158170
//Callbacks
159171
base.execCallBacks(filter_out);
172+
173+
//base.last_result = filter_out;
160174
},
161175

162176
//Compare and collect objects
@@ -284,6 +298,22 @@
284298
});
285299
},
286300

301+
search: function(ele, filter_result){
302+
var base = this;
303+
var val = $(ele).val().trim();
304+
305+
if(!val.length) return filter_result;
306+
307+
var id_str = "#" + base.settings.root + '_';
308+
309+
return $.map(filter_result, function(id){
310+
if($(id_str + id).text().toUpperCase().indexOf(val.toUpperCase()) >= 0){
311+
return id;
312+
}
313+
});
314+
315+
},
316+
287317
execCallBacks: function(result){
288318
var base = this;
289319
if(!base.settings.callbacks) return;
@@ -301,6 +331,7 @@
301331
);
302332
}
303333

334+
304335
};
305336

306337
window.FilterJS = FilterJS;

0 commit comments

Comments
 (0)