Checkbox Filtering Using MooTools ElementFilter

By  on  

When I first wrote MooTools ElementFilter, I didn't think much of it. Fast forward eight months later and I've realized I've used the plugin a billion times. Hell, even one of the "big 3" search engines is using it for their maps application. There's one more place I'd like to use it. My employer uses a basic SPAM filtering system which allows me to see emails that were incorrectly (or correctly) caught in SPAM, click a checkbox, and click a "Deliver" button. The problem is that it will catch a bunch of valid emails with very similar subject lines, so I have to hunt down all of the emails, check the email's checkbox, and keep searching. Inefficient to say the least. That's why I've used ElementFilter to find LABEL elements with the given search text and automatically check their checkboxes.

The Sample HTML

<ul id="my-list">
<li><input type="checkbox" id="chkADDRESS" /> <label for="chkADDRESS">ADDRESS</label></li>
<li><input type="checkbox" id="chkAPPLET" /> <label for="chkAPPLET">APPLET</label></li>
<li><input type="checkbox" id="chkAREA" /> <label for="chkAREA">AREA</label></li>
<li><input type="checkbox" id="chkA" /> <label for="chkA">A</label></li>
<li><input type="checkbox" id="chkBASE" /> <label for="chkBASE">BASE</label></li>
<li><input type="checkbox" id="chkBASEFONT" /> <label for="chkBASEFONT">BASEFONT</label></li>
<li><input type="checkbox" id="chkBIG" /> <label for="chkBIG">BIG</label></li>
<!-- ... more ... -->
</ul>

I've used a simple list of HTML elements for my example. Having 100 "VIAGRA!!!" labels really wouldn't be helpful.

The MooTools JavaScript

/* usage */
window.addEvent('domready',function() {
	var myFilter = new ElementFilter('search-term', '#my-list label', {
		trigger: 'keyup',
		cache: true,
		onShow: function(element) {
			$(element.get('for')).checked = true;
		},
		onHide: function(element) {
			$(element.get('for')).checked = false;
		}
	});
});

If you aren't familiar with ElementFilter, be sure to read the original post. The only code specific to my purpose is in the onShow and onHide methods. Awesome!

Give it a shot. I'll be bribing my IT team to put something like this in place. It will make managing SPAM much easier!

Recent Features

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

  • By
    Firefox Marketplace Animated Buttons

    The Firefox Marketplace is an incredibly attractive, easy to use hub that promises to make finding and promoting awesome HTML5-powered web applications easy and convenient. While I don't work directly on the Marketplace, I am privy to the codebase (and so...

Discussion

  1. Nice! Can this be extended with regular expressions?

  2. David – this is a usability masterpiece. I salute you!

  3. @Chris the Developer: As well you should. ;)

  4. David, simply amazing! You keep on rocking with every Mootools solution.

  5. First time in your blog! Seems quite interesting and of course informative!

  6. rakesh juyal

    Nice one. How about enhancing the code to support multiple search term.

    like if the search term is ap;c then it should select all checkboxes whose label starts with ap [ applet ] or c [ caption, center, cite, code ]

  7. rakesh juyal

    Nice one. How about enhancing the code to support multiple search term.

    like if the search term is ap;c then it should select all checkboxes whose label starts with ap [ applet ] or c [ caption, center, cite, code ]

  8. Mangesh vyas

    Hello sir

    Its really good as always………
    Thanks

  9. scy

    Can this be done with jquery

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!