Client Side Filter

A feature I've becoming increasingly familiar with is Client Side filter. With prototype.js collections are king and it definitely makes them easier to manage.

Build your model

One thing I've also learned is that if you can help it, represent the total data set in regular HTML markup. The downfall of creating them via JS Arrays is that if the user does not have Javascript enabled they will see nothing. We're hoping to enrich the experience, not destroy it. Once the page loads then use JS to traverse over your collections and stash their own references to them.

The Big Idea

The scenario set up below is to filter one select box based off of the selection of another. In this example the subject box contains two options Fruit and Vegetables, the second select box contains 6 values, 3 Fruits and 3 Vegetables. On change of the subject box I want the observing box to only represent values that have the appropriate category.

The Code

/**
 * author : Matthew Foster
 * @date : July 10th 2007
 */
        var SelectFilter = Class.create();
        
        Object.extend(SelectFilter.prototype,
                        {
                            
                            initialize : function(subject, observer){
                                
                                this.subject = $(subject);
                                this.observer = $(observer);
                                
                                this.changeHandle = this.handleChange.bindAsEventListener(this);
                                
                                Event.observe(this.subject, "change", this.changeHandle);
                                
                                this.cacheOptions(this.observer);
                                
                            },
                            cacheOptions : function(selectBox){
                                
                                this.optionCache = $A(selectBox.getElementsByTagName("option"));
                            
                            },
                            handleChange : function(e){
                                
                                var filter = this.subject.value;
                                
                                this.optionCache.each(this.filterObserver.bind(this, filter));
                            
                            },
                            filterObserver : function(val, ele){
                                
                                if(ele.getAttribute("category") == val)
                                    this.observer.appendChild(ele);
                                else
                                    try{
                                        this.observer.removeChild(ele);
                                    }
                                    catch(e){
                                        //shh
                                    }
                                    
                            
                            }
                            
                         
                        }
                    );
	
					
					

Still reading?

Good because now that we've taken a look at the code I can talk more about it.

The Filter

In the handleChange method we extract the value that we want to filter against, we iterate over the optionCache, being an array that we created at page load so we know it contains the entire data set. We use bind to A) Keep reference to "this" so we can reference the observe select box. B) So we can attach the filter value to the argument scope. In the actual invokation of filterObserver the filter value comes through first as it was prebound the argument scope in the function closure created by the .bind() call. Next is the element that the iterator sends us. Now we have all the data to take action, if the elements category property matches the filter value then append it, if not then remove it from the select box.

Conclusion

This is a simple example and written with a class that is very implementation specific. The point of this blog was to demonstrate an easy example of how to do some client side filtering and implement with best practices.

Comments

Name
Site
Comment
	Reload Captcha Image
Captcha