@@ -0,0 +1,79 @@ +Class: ElementFilter {#ElementFilter} +===================================== + +ElementFilter provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work. + +### Implements: + +Options, Events + +ElementFilter Method: constructor {#ElementFilter:constructor} +--------------------------------------------------------------- + + +### Syntax: + + var myElementFilter = new ElementFilter(observeElement,elements,options); + +### Arguments: + +1. observeElement - (*string or Element*) The reference to the input box. +2. elements - (*string elector or Element array*) An array of elements which will be searched. +3. options - (*object*) An object containing the ElementFilter instance's options. + +### Options: + +* cache - (*boolean*, defaults to true) Defines whether matched elements should be cached to improve performance or a fresh, full search should be done every time. +* caseSensitive - (*boolean*, defaults to false) Defines whether the search should be case-sensitive or more flexible. +* ignoreKeys - (*array*) Keys to ignore when pressed. +* matchAnywhere - (*boolean*, defaults to true) Defines whether the search should match the search term at any part of the screen or only the beginning. +* property - (*string*, defaults to 'text') The property to search -- likely "text" or "html". +* trigger - (*string*, defaults to 'keyup') The event which triggers a new search. + +### Returns: + +A ElementFilter instance. + + +### Events: + +### start + +* (*function*) Function to execute when a search begins. + +### Signature + + onStart() + +### complete + +* (*function*) Function to execute when the search is complete + +### Signature + + onComplete() + +### show + +* (*function*) Function to execute on each element that is found. + +### Signature + + onShow(element) + +#### Arguments: + +1. element - (*Element*) The element which was found. + + +### hide + +* (*function*) Function to execute on each element that is hidden (or unmatched). + +### Signature + + onHide(element) + +#### Arguments: + +1. element - (*Element*) The element which was hidden (or unmatched). Docs/ElementFilter.md @@ -0,0 +1,40 @@ +ElementFilter +========= + +ElementFilter provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work. + + + + +How to Use +---------- + +ElementFilter may be initialized at any time. Numerous custom options may be used. + + #JS + /* ElementFilter instance */ + window.addEvent('domready',function() { + var myFilter = new ElementFilter('search-term', '#my-list li', { + trigger: 'keyup', + cache: true, + onShow: function(element) { + element.set('morph',{ + onComplete: function() { + element.setStyle('background-color','#fff'); + } + }); + element.morph({'padding-left':30,'background-color':'#a5faa9'}); + }, + onHide: function(element) { + element.set('morph',{ + onComplete: function() { + element.setStyle('background-color','#fff'); + } + }); + element.morph({'padding-left':0,'background-color':'#fac3a5'}); + } + }); + }); + + +For specific usage and options, please read the documentation or visit [http://davidwalsh.name/plugin-element-filter](http://davidwalsh.name/plugin-element-filter) \ No newline at end of file README.md @@ -0,0 +1 @@ +(function(a){this.ElementFilter=new Class({Implements:[Options,Events],options:{cache:true,caseSensitive:false,ignoreKeys:[13,27,32,37,38,39,40],matchAnywhere:true,property:"text",trigger:"mouseup",onStart:$empty,onShow:$empty,onHide:$empty,onComplete:$empty},initialize:function(d,c,b){this.setOptions(b);this.observeElement=document.id(d);this.elements=$$(c);this.matches=this.elements;this.misses=[];this.listen();},listen:function(){this.observeElement.addEvent(this.options.trigger,function(b){if(this.observeElement.value.length){if(!this.options.ignoreKeys.contains(b.code)){this.fireEvent("start");this.findMatches(this.options.cache?this.matches:this.elements);this.fireEvent("complete");}}else{this.findMatches(this.elements,false);}}.bind(this));},findMatches:function(g,c){var f=this.observeElement.value;var b=this.options.matchAnywhere?f:"^"+f;var h=this.options.caseSensitive?"":"i";var d=new RegExp(b,h);var e=[];g.each(function(j){var i=(c==undefined?d.test(j.get(this.options.property)):c);if(i){if(!j.retrieve("showing")){this.fireEvent("show",[j]);}e.push(j);j.store("showing",true);}else{if(j.retrieve("showing")){this.fireEvent("hide",[j]);}j.store("showing",false);}return true;}.bind(this));return e;}});})(document.id); \ No newline at end of file Source/ElementFilter-yui-compressed.js @@ -0,0 +1,84 @@ +(function($) { + this.ElementFilter = new Class({ + + //implements + Implements: [Options,Events], + + //options + options: { + cache: true, + caseSensitive: false, + ignoreKeys: [13, 27, 32, 37, 38, 39, 40], + matchAnywhere: true, + property: 'text', + trigger: 'keyup', + onStart: $empty, + onShow: $empty, + onHide: $empty, + onComplete: $empty + }, + + //initialization + initialize: function(observeElement,elements,options) { + //set options + this.setOptions(options); + //set elements and element + this.observeElement = $(observeElement); + this.elements = $$(elements); + this.matches = this.elements; + this.misses = []; + //start the listener + this.listen(); + }, + + //adds a listener to the element (if there's a value and if the event code shouldn't be ignored) + listen: function() { + //add the requested event + this.observeElement.addEvent(this.options.trigger,function(e) { + //if there's a value in the box... + if(this.observeElement.value.length) { + //if the key should not be ignored... + if(!this.options.ignoreKeys.contains(e.code)) { + this.fireEvent('start'); + this.findMatches(this.options.cache ? this.matches : this.elements); + this.fireEvent('complete'); + } + } + else{ + //show all of the elements + this.findMatches(this.elements,false); + } + }.bind(this)); + }, + + //check for matches within specified elements + findMatches: function(elements,matchOverride) { + //settings + var value = this.observeElement.value; + var regExpPattern = this.options.matchAnywhere ? value : '^' + value; + var regExpAttrs = this.options.caseSensitive ? '' : 'i'; + var filter = new RegExp(regExpPattern, regExpAttrs); + var matches = []; + //recurse + elements.each(function(el){ + var match = (matchOverride == undefined ? filter.test(el.get(this.options.property)) : matchOverride); + //if this element matches, store it... + if(match) { + if(!el.retrieve('showing')){ + this.fireEvent('show',[el]); + } + matches.push(el); + el.store('showing',true); + } + else { + if(el.retrieve('showing')) { + this.fireEvent('hide',[el]); + } + el.store('showing',false); + } + return true; + }.bind(this)); + return matches; + } + }); +})(document.id); \ No newline at end of file Source/ElementFilter.js @@ -1,7 +1,7 @@ name: ElementFilter author: davidwalsh -current: -category: -tags: [] -docs: -demo: +current: 1.0 +category: Utilities +tags: [element,filter,search] +docs: http://davidwalsh.name/plugin-element-filter +demo: http://davidwalsh.name/plugin-element-filter package.yml 2623bd896d1bd30dbdd881cca4c3918832639599 David Walsh davidwalsh83@gmail.com http://github.com/darkwing/ElementFilter/commit/4eb02a4ef9f9367e662ad003c66a5c5c85818cf5 4eb02a4ef9f9367e662ad003c66a5c5c85818cf5 2009-10-06T17:44:05-07:00 2009-10-06T17:44:05-07:00 Added all the necessary forge files f2123f46f1fcd8c999466167031e8692267424b6 David Walsh davidwalsh83@gmail.com