Lewis Hill - Web Enthusiast, Design Junkie, Terrible Magician.

Filta jQuery Plugin

During a recent project I needed to to be able to search through a list of list items, without reloading the page.

I tried using isotope.js, which is a fantastic plugin for filtering with cool effects, but we found it was crashing our app when used on an iPhone, basically it was too resource intensive.

So I wrote my own one. Simple and easy to use.

Download filta.js or view a live demo.

Usage

Using filta.js is very simple, you just attach it to an input element on your page and optionally give it the id attribute of a specific ul or ol element you want it to target.

First you’ll need to include the plugin in your page.

 HTML |  copy code |? 
1
<script src="inc/js/filta.jQuery.js"></script>

Your HTML input and list will look something like this..

 HTML |  copy code |? 
1
<input name="search" type="text" id="search" placeholder="Search for Name"/>
2
 
3
<ul id="names">
4
 <li>Lewis</li>
5
 <li>Steve</li>
6
 <li>Shelley</li>
7
 <li>Lucie</li>
8
</ul>
9

You just need to grab the input ID as the selector, in this case “search” and add filta to it like so..

 Javascript |  copy code |? 
1
$("#search").filta();

Options

filta.js accepts one option, list. It allows you to target a specific ul or ol on the page, the syntax is as follows..

 Javascript |  copy code |? 
1
2
$("#search").filta({
3
 list: "#names"
4
});
5

Have fun

I learned a lot writing filta.js, not least of which was how to write a jQuery plugin, this is my first. I hope you find some use for it! 🙂

I'm into comics, I thought it a shame that they get delivered, read once and hidden away in a box. I built a database to track and view them. My Comic Collection.

I collaborated with Michael Dean on an idea I had to play Rock, Paper, Scissors over the internet. I handled the design. Go to Settlr.

I illustrated the Marvel Character Cyclops and it got picked up by the Executive Editorial Director for Marvel.com. I'm so proud :)

Custom built WordPress website for High Beech Primary School in Loughton.