_{Code -> Quick JS Filter}

Quick JavaScript Filter

I found this fantastic snippet of code on StackOverflow recently, and thought it should be highlighted.

One of the problems with the Mysidia PHP framework is that AJAX is rather tricky to use, for reasons I won't go into now. I had a page with a big list of griffins, each one in a different location, and needed to let the user filter them by that. It would be annoying to reload the page with each new query... surely it would be possible to show/hide lots of the griffin divs at once, using jQuery?

Yes indeed, as that awesome StackOverflow answer showed! So for those who are new to PHP, or JS, or the Mysidia framework, let me share this easy example for filtering pets on a page.

First, anywhere in your page, add the CSS and jQuery in style and script tags.
Your things-to-filter will need to be in divs, though nobody says they need to be styled/visible.

$document->add(new Comment("<style>

#wrapper > div {width:250px;padding:5px;background-color:rgba(255,255,255,0.7);border:1px solid white;border-radius:5px;margin:4px; display:inline-table;}

</style>

$(document).ready(function() {

$('a.control').click(
function(){
var show = this.id;
$('#wrapper > div.' + show).show();
$('#wrapper > div:not(\".'+show+'\")').hide();
return false;
});

});

</script> ",FALSE));

Next, decide what 'search terms' you'll be looking for. In this example it's a series of words: Port, Hills, Coastline or Marsh. Add the words inside the IDs of some buttons, in a HTML section. You'll probably want to keep the 'show all' option, too.

<a href='#' id='showall' class='control'><button>Show All</button></a>
<a href='#' id='Port' class='control'><button>Port</button></a>
<a href='#' id='Hills' class='control'><button>Hills</button></a>
<a href='#' id='Marsh' class='control'><button>Marsh</button></a>
<a href='#' id='Coastline' class='control'><button>Coastline</button></a>

<br><br><div id='wrapper'>

We're leaving that wrapper div open, as your things-to-filter will be contained in it. You could style it if you want.
Now back in PHP-space, start looping through your pets/items/whatever it is. The desired term-to-filter-by must be added inside each div's class. Most likely you'll be fetching it from a database column as a variable. Here's my method, getting the griffin's location:

$allgriffs = $mysidia->db->select("owned_adoptables", array("aid"), "owner='{$mysidia->user->username}' ORDER BY aid ASC LIMIT 500");
while($griffid = $allgriffs->fetchColumn()){ // begin loop, getting griff IDs

$n_order++;

// let's find each griffin, to get more info about
$gri = $mysidia->db->select("owned_adoptables", array(), "aid ='{$griffid}'")->fetchObject();

$document->add(new Comment("<div class='showall {$gri->location}'><a href='/flock/manage/{$griffid}'><b>{$gri->name}</b> </a><br>{$gri->location}</div> ",FALSE));

} // loop done

Finally let's close the wrapper div.

$document->add(new Comment(" </div> ",FALSE));

You should now have a list of pet names and then the terms-to-search-for underneath, and also in each div's class, if you view the page source code.

When you click a button, it will look for divs whose classes contain that word, show them, and hide all the rest.
Yes, it still works for multiple words like 'Port Whatever' - that button only looks for 'Port' which is certainly there.

That was simple, eh?

Admittedly it's a bit limited - only one 'search criteria' at a time, so it's not a substitute for a proper search system. Still can be very useful for all kinds of minor features. I'm going to use it on the Flock page so users can quickly grab griffins of certain ages, sexes, breeds... just add the extra variables in the div class. If one has "male adult Minoan Hills", it will be included when the user 'searches' for either males, adults, Minoans or Hills.

It's all on client side, so it's instant and doesn't require any back-and-forth with your server, unlike AJAX. Fabulous!