Skip to content

Instantly share code, notes, and snippets.

@tkh44
Last active December 11, 2015 03:59
Show Gist options
  • Save tkh44/4542027 to your computer and use it in GitHub Desktop.
Save tkh44/4542027 to your computer and use it in GitHub Desktop.
Category/Item Filter using Autocomplete components from YUI3
YUI().add('filter-search-plugin', function (Y) {
var FilterSearch = Y.Base.create('filterSearch', Y.Base, [Y.AutoCompleteBase], {
initializer: function() {
this._bindUIACBase();
this._syncUIACBase();
}
});
FilterPlugin = Y.Base.create('filterPlugin', Y.Plugin.Base, [], {
initializer: function() {
var attrs = this.getAttrs();
filter = new FilterSearch({
inputNode: attrs.host || attrs.input_selector,
minQueryLength: attrs.min_query_length,
queryDelay: attrs.query_delay,
source: (function () {
var results = [];
Y.all(attrs.item_selector).each( function(node) {
results.push({
node: node,
searchText: node.getData(attrs.search_text_attribute.split('data-')[1])
});
});
return results;
}()),
resultTextLocator: 'searchText',
resultFilters: attrs.result_filters
});
filter.on('results', attrs.results_callback, null, attrs);
},
clearSearch: function(e){
var attrs = this.getAttrs();
console.log(this);
attrs.reset_filter_fn(e, attrs);
}
}, {
NS: 'filter',
ATTRS: {
container_selector: {
value: '[data-filter="container"]',
validator: Y.Lang.isString
},
input_selector: {
value: '[data-filter="input"]',
validator: Y.Lang.isString
},
item_selector: {
value: '[data-filter="item"]',
validator: Y.Lang.isString
},
category_selector: {
value: '[data-filter="category"]',
validator: Y.Lang.isString
},
no_match_selector: {
value: '[data-filter="no-match"]',
validator: Y.Lang.isString
},
search_text_attribute: {
value: 'data-searchtext',
validator: Y.Lang.isString
},
min_query_length: {
value: 0,
validator: Y.Lang.isNumber
},
query_delay: {
value: 0,
validator: Y.Lang.isNumber
},
result_filters: {
value: 'phraseMatch',
validator: Y.Lang.isString
},
hide_class: {
value: 'hidden',
validator: Y.Lang.isString
},
results_callback: {
value: function(e, attrs) {
Y.all(attrs.category_selector).addClass(attrs.hide_class);
Y.all(attrs.item_selector).addClass(attrs.hide_class);
if (Y.Object.isEmpty(e.results)) {
//Show our no match element
Y.one(attrs.container_selector + ' ' + attrs.no_match_selector).removeClass(attrs.hide_class);
attrs.no_match_fn(attrs);
} else {
//Make sure no match element is hidden
Y.one(attrs.container_selector + ' ' + attrs.no_match_selector).addClass(attrs.hide_class);
//Show our relevant results
Y.Array.each(e.results, function(result) {
//unhide and set up category
var node = result.raw.node,
parent = result.raw.node.ancestor(attrs.category_selector);
parent.removeClass(attrs.hide_class);
node.removeClass(attrs.hide_class);
attrs.result_item_fn(node, parent);
});
if (e.query !== '') {
attrs.global_results_fn();
}
}
}
},
/*
* Function to call when there are any results
*/
global_results_fn: {
value: function() {
// Y.log('global_results_fn called');
return false;
}
},
/*
* Helper function to call on each individual "result" item
* as it is displayed on "found"
*/
result_item_fn: {
value: function(node, parent) {
// Y.log('result_item_fn called');
return false;
}
},
/*
* Helper function when there are no results
*/
no_match_fn: {
value: function(attrs) {
// Y.log('no_match_fn called');
return false;
}
},
/*
* Helper function to run when the filter is reset
*/
reset_filter_fn: {
value: function(e, attrs) {
console.log('reset_filter_fn called');
Y.one(attrs.input_selector).set('value', '');
}
}
}
});
}, '1.0', {requires: ['base-build', 'autocomplete-base', 'autocomplete-filters', 'plugin'] });
YUI().use( 'filter-search-plugin', 'node', function (Y) {
window.Y = Y; //So we can play with YUI in the console.
Y.one('[data-filter="input"]').plug(FilterPlugin, {
hide_class: 'search-hide',
//?? what do i want to do here
result_fn: function() {
},
global_results_fn: function() {
/* call to boxes_combined.js */
/* NEEDS TO BE REMOVED/UPDATED on boxes_combined.js rewrite
* This function temporarily expands the boxes that have been
* minified so that all relevant search results are shown
*/
tempexpandboxes();
Y.one('#searchAction').replaceClass('ui-filter_search', 'ui-filter_cancel');
},
no_match_fn: function(attrs) {
Y.one(attrs.no_match_selector + ' #resetFilter').on('click', function(e){
Y.one(attrs.input_selector).filter.clearSearch();
});
},
reset_filter_fn: function(e, attrs) {
this.host.set('value', '');
Y.one('#searchAction').replaceClass('ui-filter_cancel', 'ui-filter_search');
}
}).on('keyup', function(e) {
if (e.keyCode === 27) { //on escape reset the value
this.filter.clearSearch();
}
});
//Provide a custom hook for the keyup event on the input node
// Y.one('[data-filter="input"]').on('keyup', function(e){
// if (e.keyCode === 27) { //on escape reset the value
// this.set('value', '');
// }
// });
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment