Provides a simple interface for filtering a list of dom nodes.
Example usage:
Basic, search input at top:
new DomFilter({
insertBefore : 'nav ul',
filterNodes : 'nav ul li'
});Basic, search input at bottom:
new DomFilter({
insertAfter : 'nav ul',
filterNodes : 'nav ul li'
});Altering the text used on the filter
new DomFilter({
insertBefore : 'nav ul',
filterNodes : 'nav ul li',
strings: {
'en': {
'feedback': {
'no_results' : 'No matches',
'default_feedback_message': ''
},
'input' : {
'placeholder': 'Search',
'label' : 'F50D;:'
}
}
}
});Custom match function (matching title as well as text content):
new DomFilter({
insertBefore : 'nav ul',
filterNodes : 'nav ul li',
/**
*
* @param node
* @param searchText
* @returns {boolean}
*/
matchFunction : function ( node, searchText ) {
var title = node.getAttribute('title'),
nodeText = node.innerText.toLocaleLowerCase();
searchText = searchText.toLocaleLowerCase();
if ( typeof title !== 'string' ) {
title = '';
}
title = title.toLocaleLowerCase();
return (title.indexOf(searchText) > -1) || (nodeText.indexOf(searchText) > -1);
}
});Multiple filters on the same page, including tables
new DomFilter({
insertBefore : '.primary-nav ul',
filterNodes : '.primary-nav ul li'
});
new DomFilter({
insertBefore : '.secondary-nav ul',
filterNodes : '.secondary-nav ul li'
});
new DomFilter({
insertBefore : '.datatable',
filterNodes : '.datatable tbody > tr'
});