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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    Using Opacity to Show Focus with jQuery

    A few days back I debuted a sweet article that made use of MooTools JavaScript and opacity to show focus on a specified element. Here's how to accomplish that feat using jQuery. The jQuery JavaScript There you have it. Opacity is a very simple but effective...

  • By
    Drag &#038; Drop Elements to the Trash with MooTools 1.2

    Everyone loves dragging garbage files from their desktop into their trash can. There's a certain amount of irony in doing something on your computer that you also do in real life. It's also a quick way to get rid of things. That's...

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!