My own Fancy Drop Down

So thanks to the post and some extension of my own, I have created a plugin that reskins the  option select.

It looks the same as the example in the above post except it utilises quicksilver.js smart searching and has keyboard navigation. To use this you need, fancydropbox.css, fancydropbox.js, quicksilver.js and a recent version of jQuery. Keyboard navigation is the up and down arrows to change selection and enter to select the highlighted selection.

EDIT: I had to remove the download and change to SVN as google code files was giving me some weird issues, otherwise most recent version fixed a bug when adding more than one drop-box on the same page.

To setup the fancy box in it’s most basic use the following after including the aforementioned files:

<script type="text/javascript">

	$(document).ready(function() {


<select id="source">
<option selected="selected" value="BR">Brasil</option>
<option value="FR" dispAfter="" dispBefore="">France</option>
<option value="DE">Germany</option>
<option value="IN">India</option>
<option value="JP">Japan</option>
<option value="RS">Serbia</option>
<option value="UK">United Kingdom</option>
<option value="US">United States</option>

More complex effects can be got by using the dispBefore and dispAfter attributes in the option tags, any html or text placed in these will be inserted before/after the value in the option tag. Also when calling the fancifydropdown() function you can include a config, e.g. fancifydropdown({onSelect: function(){}, maxItems: 10}). Putting a function in for the onSelect will fire the event anytime that an element is selected from the list, in the function $(this) refers to the element that was selected. maxItems defaults to -1 which shows all items in the list when unfiltered, any other value will limit the most shown when searching to be that number.

About Simeon Cheeseman

I enjoy a wide variety of computer and board games, have a BSc in Computer Science and have played percussion for 18 years.

Posted on January 26, 2011, in jQuery. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: