Dynamic Search Box jQuery Plugin – dynoBox

dynoBox was supposed to be just a copy and paste bit of code, but then I decided, what the hell, might as well make it a full blown plugin. Even after that I thought it was only going to have 2 options, selectAll and value. While building it I kept on thinking, shit, what if…

So what is dynoBox anyways? There are a lot of pretty form plugins and AJAX form plugins as well. This is neither. This takes a stab at something a lot of sites are doing to keep their UI more minimal. It basically, by default, will show “Search” in an input field you specify. When the user clicks on it the “Search” text will then get emptied out and be ready for the user to start typing. If the user then clicks again after typing, the text the user typed will remain. However, if the user erases all or leaves a space, if will then revert the text box back to it’s original state.

Full documentation and parameter listing is here:

http://code.google.com/p/dynobox/

The simplest way to add this is to just add (on top of jQuery, of course):

<script type="text/javascript" src="http://dynobox.googlecode.com/files/jquery.dynobox.0.8.js"></script>

And then you just call dynoBox like this:

$(function(){
	$('input').dynoBox();
});

Posted in Programming, jQuery