Last active
December 11, 2015 03:59
-
-
Save tkh44/4542027 to your computer and use it in GitHub Desktop.
Category/Item Filter using Autocomplete components from YUI3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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