But First....

    • Read more or add your comments about this script on the related blog post.
    • View the mootools class raw code.
    • Download the code with example file, assets, css and all javascript files.

Overview:

  • An unobtrusive filter (ie. no javascript = no filter) for Multiple Select Lists.
  • As many Filters on a single page as required.
  • Modal Window:
    • Opens in Modal Window so as to not upset the general page layout (as happened in with previous versions)
    • It has no fading or similar effects so as to open as fast as possible, click the button and it opens straight away.
    • "Search" buttong (icons) are added dynamically alongside the select lists (though these could be added inline if preferred).
    • Styled via CSS, no images (except icons). Styling uses CSS3 spec but downgrades to non-supoorting browsers such as IE.
  • The Filter:
    • Javascript code reads the select list options and creates an unordered list that can be manipulated by the code.
    • As the user types, the list of options is filtered down (or up) to show the matches.
    • Button to reset filter box and list.
    • Button to deselect all the currently selected options.
    • Currently selected options in the original select list are marked as selected in the filter list.
    • Holding down the "shift" button whilst mouseover will select/deselect multiple options.

Dependencies:

Implementation:

var filter = new multipleSelectFilter();


Example (gets all multiple select lists on page):
window.addEvent('domready', function() {
  //	add seach buttons dynamically (these could equally by defined inline)
  var imgSearch='search';
  $$('select[.searchables]').each(function(el,index){
    var idSelect=el.id;
    var lnk=new Element('div',{'html':''+imgSearch+''}).inject(el,'after');
  })
  
  //	initiate class
  var filter = new multipleSelectFilter();
  
  // bind the links to the modal instance
  filter.bindOpeners($$('a.btSelectFilter'));
});

Options:

  • See source code

Demonstration:

Cats:
Dogs
Select List (no filter):

Download the Code: