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!

Cloudinary

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
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

Incredible Demos

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!