Ninja Search JS - the Greasemonkey Script by drnic
Do long drop down lists make you want to send out an assassin and hunt down web developers? Then I have the ninja for you.
Ninja Search JS - the Greasemonkey Script (aka ninja-search-js) converts all nasty, long drop down lists into autocompleteable text fields; and then then snap back into their drop down list form when you've selected an item.
If the drop down has 5 or fewer options then the ninja never appears. He's too busy.
Live Demo
Click on the ninja icon, typing in your time zone and press return.
There is no ninja for small lists (5 or fewer items):
Step-by-Step Demo
I wrote this demo first before the live demo. I don't feel like removing it yet.
Imagine the worst of all drop downs - the time zone selector. The 8 USA time zones are commonly first, then the other 100 time zones. Now imagine you don't live in one of the first 8 time zones and now you're living the pain.
I live in Brisbane. Where the hell is it on this huge drop down? Feel the hurt. Now, let's get some help from a ninja. Specifically, the Ninja Search JS - the Greasemonkey Script is here to help.
Once you have this script installed, all drop downs are accompanied by a friendly Ninja. He's your new best friend. Click him to activate Ninja Search on that drop down list.
We use a Quicksilver-like algorithm to find matches similar to what you typed (thanks to liquidmetal and jquery-flexselect projects by Ryan McGeary)
After you select an item then the Ninja Search field will disappear into the night and your original dropdown field will return, with your selected item being displayed.
Dependencies
This project requires Greasemonkey (for Firefox) or GreaseKit (for Safari). The script is installed into these extensions once, and will auto-update.
It does not work in other browsers or without Greasemonkey/GreaseKit.
Install
Open the ninja-search.user.js script into FireFox or Safari and it will be automatically installed into Greasemonkey or GreaseKit. (see dependencies).
Bugs, Requests, Issues
Log and discuss any ideas on the GitHub Issue Tracker.
Authors
Dr Nic Williams (http://drnicwilliams.com, @drnic, http://github.com/drnic)
Thanks to Ryan McGeary who created the liquidmetal and jquery-flexselect projects which have been used in almost their entirety.
The Ninja Search 'ninja' logo was created by Dan Ritz - thanks for coming to RailsCamp 5, Dan!
The icon was original developed for the Cocoa application Ninja Search, for which the idea was adapted into a Greasemonkey script. So I kept the name and thus got to keep the cool icon :)
Contact
Dr Nic Williams (http://drnicwilliams.com, @drnic, http://github.com/drnic)
Source
You can clone the project with Git by running:
$ git clone git://github.com/drnic/ninja-search-js
License
Copyright (c) 2009 Dr Nic Williams, Mocra Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.