For a recent project I was working on I needed to work with very large select lists, which can be a pain to develop and a pain to use. Luckily, I stumbled across a site called BarelyFitz.com created by Patrick Fitzgerald, a fellow Georgia Tech graduate (go Jackets!). He has on offer a great little javascript library called filterlist.js for filtering large select lists via regular expressions. For my needs, I required one feature that isn't included in his release--the ability to unfilter the list and maintain your selections.
By default, the usage of his script would follow this pattern:
When programming, you never want to reinvent the wheel. I knew from past work within javascript that I needed to (a) be able to remove an item from an array and (b) to check if a value is already in an array. The built in functionality isn't quite there to do this simply, so I'm also using two other functions that I need -- Follow the links to the original authors:
Finally, one other aggravation with select lists is that you can't really declare a set the width for a select box with any certainty (ie: width in number of characters). In Patrick's example the width is set to a fixed 110 pixels, and depending on your browser/font/display that means some of the longer entries may flow out of visibility. However, if he didn't hard code the 110 pixel width, (no width setting at all) that select box would be as wide as the longest entry. This is great, until you filter the list -- the select box width will jump around in sizes which is not visually appealing. Because of this, I set a mono-spaced font (courier) and added a feature to add an entry to the filtered lists that is customizable text set to be as long as the longest select item. In the examples it is: "___No More Matches___".
This is the end result working with an industry list of over 200 entries:
Simple, downloadable example can be found here. (using Patrick's example dataset).