From c75865a6609eada665e41dae08ba61306ac7ae95 Mon Sep 17 00:00:00 2001 From: Igor Vaynberg Date: Tue, 31 Jul 2012 21:36:34 -0700 Subject: [PATCH] release 3.0 --- index.html | 1956 ++++++++++++++++++-------------- select-2.1.html | 1010 +++++++++++++++++ select2-3.0/README.md | 67 ++ select2-3.0/select2.css | 514 +++++++++ select2-3.0/select2.js | 2195 ++++++++++++++++++++++++++++++++++++ select2-3.0/select2.min.js | 76 ++ select2-3.0/select2.png | Bin 0 -> 396 bytes select2-3.0/spinner.gif | Bin 0 -> 1849 bytes select2-latest.html | 21 +- 9 files changed, 4985 insertions(+), 854 deletions(-) create mode 100755 select-2.1.html create mode 100755 select2-3.0/README.md create mode 100755 select2-3.0/select2.css create mode 100755 select2-3.0/select2.js create mode 100644 select2-3.0/select2.min.js create mode 100755 select2-3.0/select2.png create mode 100755 select2-3.0/spinner.gif diff --git a/index.html b/index.html index 6954635c..eb537ede 100755 --- a/index.html +++ b/index.html @@ -1,55 +1,63 @@ --- layout: main -title: Select2 2.1 +title: Select2 3.0 group: navigation -version: 2.1 +version: 3.0 --- - - + + -
-
- +
+
-
-

Changelog from 2.0

-
-
    -
  • Added support for disabled mode. See Disabled Mode example
    • -
  • Added ability to provide custom matcher functions. See Custom Matcher Function example
    • -
  • Minimum required jQuery version bumped to 1.4.4
    • -
-
-

Changelog from 1.0

-
-
    -
  • Support for selection of multiple values. See multiple option in the docs.
    • -
  • Built-in tagging support. See the Tagging example.
    • -
  • Ability to reset back to placeholder once a selection has been made. See allowClear option in the docs.
    • -
  • Simplified paging of remote datasets by tracking the page number automatically.
    • -
  • Minimum required jQuery version changed from 1.7+ to 1.4.2
    • -
-
-
+
+

Changelog from 2.x

+
+
    +
  • Dropdown div is now appended directly to body and is absolutely positioned. This should allow the dropdown to overlap height-constrained containers such as modal windows.
    • +
  • Optgroups are now supported in selects. N-level deep nesting of results is supported when attached to input[type=hidden], see the new children property described in the docs.
    • +
  • Signature of initSeletion has changed to support initialization from asynchronous requests.
    • +
  • Dropdown will now open below or above the control depending on available screen space. No more scrolling the page to see to see all matched results.
    • +
  • Signature of formatSelection and formatResult changed in a backwards compatible way to support more powerful constructs than supported by strings alone.
    • +
  • Separator in multi-valued selects is now cofigurable, , still the default. See separator option in the docs.
    • +
  • Matching is now customizable. See matcher function in the docs and the Custom Matcher example.
    • +
  • change event now specifies which elements were added/removed
    • +
  • width option now supports various strategies instead of always being copied from the source element
    • +
  • Clicks on a label associated with the source element are now redirected to Select2.
    • +
  • val will now only accept ids, if you want to specify the full object for the selection use the new data method instead. val will also now only work on non-selects if initSelection was specified.
    • +
  • It is now possible to limit the number of options that can be selected in a multi-select component. See the Maximum Selection Size example
    • +
+
+
-
-

Browser Compatibility

- -
+
+

Browser Compatibility

+ +
-
-
-
-

Examples

-
-
-
+
+
+
+

Examples

+
+
+
-
-
-

The Basics

-

Select2 can take a regular select box like this:

-

-

and turns it into:

-

-
-

-

with support for quick option filtering via a search box

-
-
-

Example Code

+
+
+

The Basics

+

Select2 can take a regular select box like this:

+

+

+

and turns it into:

+

+ +

+

with support for quick option filtering via a search box

+
+
+

Example Code

 <head>
     <link href="select2.css" rel="stylesheet"/>
@@ -264,747 +331,960 @@ version: 2.1
     </select>
 </body>
-
-
+
+
-
-
-

Multi-Value Select Boxes

-

Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute. Select2 automatially picks up on this:

-

-
-

-
-
-

Example Code

+
+
+

Multi-Value Select Boxes

+

Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute. Select2 automatially picks up on this:

+

+ +

+
+
+

Example Code
-
-
+
+
-
- -
-

Placeholders

-

A placeholder value can be defined and will be displayed until a selection is made:

-

-
-

-

-
-

-

The placeholder can be declared via a data-placeholder attribute attached to the select, or via the placeholder configuration element as seen in the example code

-

Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.

+ +
+

Placeholders

+

A placeholder value can be defined and will be displayed until a selection is made:

+

+
+

+

+
+

+

The placeholder can be declared via a data-placeholder attribute attached to the select, or via the placeholder configuration element as seen in the example code

+

Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.

-
-
-

Example Code

+
+
+

Example Code
-
-
+ + -
-
-

Minimum Input

-

Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful:

-

-
-

-
-
-

Example Code

- 

-    

-

+        

+          

+            
Minimum Input

+             
Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful:

+             

+                 

+             

+          

+          

+            
Example Code

+            

+         

+        

 
-

-    

-        
Templating

-        
Various display options of the Select2 component can be changed:

-        

-            

-        

-    

-    

-        
Example Code

-        

-    

-

+        

+          

+            
Templating

+             
Various display options of the Select2 component can be changed:

+             

+                 

+             

+          

+          

+            
Example Code

+            

+            

+                You can set data- attributes to <option> (or <optgroup>) and use them inside temptlating functions:
+            

+            
+                <select>
+                    <option value="0" data-foo="bar">option one</option>
+                    ...
+                </select>
+            

+            
+                function format(state) {
+                    var originalOption = state.element;
 
-

-    

-        
Loading Data

-        
Select2 uses a function to load result data. Here is a trivial example that creates choices that consist of user's input repeated a number of times:

-        

-            
-        

-        
In order to take advantage of custom data loading Select2 should be attached to an input type='hidden' tag, otherwise data is parsed from select's option tags.

-    

-    

-        
Example Code

+                    return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + originalOption.data('foo') + "' />" + state.text;
+                }
+            

+         

+        

+
+       

+          

+            
Loading Data

+             
Select2 uses a function to load result data. Here is a trivial example that creates choices that consist of user's input repeated a number of times:

+             

+                 
+             

+             
In order to take advantage of custom data loading Select2 should be attached to an input type='hidden' tag, otherwise data is parsed from select's option tags.

+          

+          

+            
Example Code

             
             

-    

-

+         
+        
 
-

-    

-        
Loading Array Data

-        
Select2 provides some shortcuts that make it easy to access local data stored in an array instead of having to write a query function mentioned in the example above.

-        
Example below inlines the data by specifying an array in the data element. Items in such an array must have id and text keys.

-        

-            
-        

-        
If your data does not have a text key, an alternative key can be specified as a string:

-        

-            
-        

-        
or as a function:

-        

-            
-        

-    

-    

-        
Example Code

+
+
+      

+          

+              
Maximum Selection Size

+              
Select2 allows the developer to limit the number of items that can be selected in a multi-select control.
+              In the example below only 3 or less items can be selected.

+              

+                  
+              

+          

+          

+              
Example Code

+            
+            

+          

+      

+
+      

+         

+           
Loading Array Data

+            
Select2 provides some shortcuts that make it easy to access local data stored in an array instead of having to write a query function mentioned in the example above.

+            
Example below inlines the data by specifying an array in the data element. Items in such an array must have id and text keys.

+            

+                
+            

+            
If your data does not have a text key, an alternative key can be specified as a string:

+             

+                 
+             

+             
or as a function:

+             

+                 
+             

+         

+         

+           
Example Code

            
            

-    

-

+        

+       

 
-

-    

-        
Loading Remote Data

-        
Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:

-        

-            
-        

-        
If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.

-        
Example Code

-        

-        
Select2 uses jQuery's $.ajax function to execute the remote call by default. An alternative transport function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom query function instead of using the ajax helper

-    

-

-

-    

-        
Infinite Scroll with Remote Data

-        
Select2 supports lazy-appending of results when the result list is scrolled to the end.
-            In order to enable the remote service must support some sort of a paging mechanism and
-            the query function given to Select2 must take advantage of it. The following example demonstrates
-            how this can be set up. Search for some keyword and then scroll the result list to the end to
-            see more results load:

-        

-            
-        

-        
If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.

-        
Example Code

-        

-    

-

+        

+           

+             
Loading Remote Data

+              
Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:

+              

+                  
+              

+               
If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.

+               
Example Code

+              

+              
Select2 uses jQuery's $.ajax function to execute the remote call by default. An alternative transport function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom query function instead of using the ajax helper

+           

+        

+        

+            

+              
Infinite Scroll with Remote Data

+               
Select2 supports lazy-appending of results when the result list is scrolled to the end.
+                   In order to enable the remote service must support some sort of a paging mechanism and
+                   the query function given to Select2 must take advantage of it. The following example demonstrates
+                   how this can be set up. Search for some keyword and then scroll the result list to the end to
+                   see more results load:

+               

+                   
+               

+                
If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.

+                
Example Code

+              

+            

+         

 
-

-    
-    

-        
Programmatic Access

-        
Select2 supports methods that allow programmatic control of the component

-        

-            
-            
-            
-            
-        

-        

-            

-        

-        

-            
-            
-            
-            
-        

-        

-            

-        

-    

-    

-        
Example Code

-        

-    

-

+        

+
+            

+            
Programmatic Access

+             
Select2 supports methods that allow programmatic control of the component

+                

+                  
+                  
+                  
+                  
+                  
+                  
+                  
+                

+             

+                 

+             

+                

+                  
+                  
+                  
+                  
+                    
+                    
+                  
+                

+              

+                  

+              

+          

+          

+            
Example Code

+            

+         

+        

 
-

-    
-    

-        
Change Event

+      

+
+          

+              
Events

 
-        
Select2 triggers the change event on the original element whenever its value is changed by
-            the user

+              
change event is triggered on the original element whenever its value is changed by
+                  the user

+              
open event is triggered on the original element whenever the dropdown needs to be opened

 
-        

+              

 
-        

+              

 
-        

-    

-    

-        
Example Code

+              
    
+          
    
+          
    
+              
    Example Code
    
            
                
    
-    
    
-
    
-
    
-    
-    
    
-        
    Tagging Support
    
+          
    
+      
    
+      
    
+
+          
    
+              
    Tagging Support
    
 
-        
    Select2 can be used to quickly set up fields used for tagging
    
+              
    Select2 can be used to quickly set up fields used for tagging
    
 
-        
    
-        
    Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by
-            picking the first choice which is what the user has typed into the search box so far.
    
-    
    
-    
    
-        
    Example Code
    
+              
    
+              
    Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by
+                  picking the first choice which is what the user has typed into the search box so far.
    
+          
    
+          
    
+              
    Example Code
    
            
                
    
-    
    
-
    
+          
    
+      
    
 
-
    
-    
-    
    
-        
    Reacting to external value changes
    
+      
    
+
+          
    
+              
    Reacting to external value changes
    
 
-        
    Select2 can react to external value changes and keep its selection in-sync. This feature allows
-            Select2 to work seamlessly with front-end frameworks that use data binding between ui components
-            and model values.
    
-        

    
-        
     
    
-        
    This feature is only available when initSelection() function is provided in
-            the options. This function is needed to map the choice ids set on the element to objects used by
-            Select2. This function is set by default when Select2 is attached to a select or when
-            the tags helper function is used.
    
-    
    
-    
    
-        
    Example Code
    
+              
    Select2 can react to external value changes and keep its selection in-sync. This feature allows
+                  Select2 to work seamlessly with front-end frameworks that use data binding between ui components
+                  and model values.
    
+              

    
+              
     
    
+              
    This feature is only available when initSelection() function is provided in
+                  the options. This function is needed to map the choice ids set on the element to objects used by
+                  Select2. This function is set by default when Select2 is attached to a select or when
+                  the tags helper function is used.
    
+          
    
+          
    
+              
    Example Code
    
            
                
    
-    
    
-
    
+          
    
+      
    
 
-
    
-    
-    
    
-        
    Select2 Lifecycle
    
+      
    
+
+          
    
+              
    Select2 Lifecycle
    
 
-        
    
+              
    
 
-        
    
-        

    
-        
     
    
-    
    
-    
    
-        
    Example Code
    
+              
    
+              

    
+              
     
    
+          
    
+          
    
+              
    Example Code
    
            
                
    
-    
    
-
    
+          
    
+      
    
 
-
    
-    
-    
    
-        
    Select2 Drag and Drop Sorting
    
-        
    
-            Select2 supports drag and drop sorting of selected choices. Select2 does not, itself, provide the necessary code to perform dragging and dropping, instead it provides hooks that other libraries can use to provide the behavior. In this example we are using JQuery UI's sortable() plugin.
-        
    
-        
    The sorting is only available when Select2 is attached to a hidden input field.
    
-        
    
-        
    
-    
    
-    
    
-        
    Example Code
    
+$("#e15").select2("container").find("ul.select2-choices").sortable({
+    containment: 'parent',
+    start: function() { $("#e15").select2("onSortStart"); },
+    update: function() { $("#e15").select2("onSortEnd"); }
+});
+});
+
+          
    
+              
    Select2 Drag and Drop Sorting
    
+              
    
+                  Select2 supports drag and drop sorting of selected choices. Select2 does not, itself, provide the necessary code to perform dragging and dropping, instead it provides hooks that other libraries can use to provide the behavior. In this example we are using JQuery UI's sortable() plugin.
+              
    
+              
    The sorting is only available when Select2 is attached to a hidden input field.
    
+              
    
+              
    
+          
    
+          
    
+              
    Example Code
    
            
                
    
-    
    
-
    
+          
+      
 
 
-
    
-    
-    
    
-        
    Select2 Disabled Mode
    
-        

    
-        

    
-        
     
    
-    
    
-    
    
-        
    Example Code
    
+      
    
+          
+          
    
+              
    Select2 Disabled Mode
    
+              

    
+              

    
+              
     
    
+          
    
+          
    
+              
    Example Code
    
            
                
    
-    
    
-
    
+          
    
+      
    
 
-
    
-    
-    
    
-        
    Custom Matcher
    
-        
    Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere
    
-        

    
-    
    
-    
    
-        
    Example Code
    
+      
    
+          
+          
    
+              
    Custom Matcher
    
+               
    Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere
    
+              

    
+              
    The dropdown below matches on custom attributes of the option tag. For example, the `blue` option can be matched by entering either `blue` or `cyan`.
    
+              
    
+          
    
+          
    
+              
    Example Code
    
            
                
    
-    
    
-
    
+          
    
+      
    
+
+      
    
+          
+          
    
+              
    Responsive Design - Percent Width
    
+              
    Select2's width can be set to a percentage of its parent to support responsive design. The two Select2 boxes below are styled to 50% and 75% width respectively.
    
+              

    
+              

    
+              
    Select2 will do its best to resolve the percent width specified via a css class, but it is not always possible. The best way to ensure that Select2 is using a percent based width is to inline the style declaration into the tag.
    
+          
    
+          
    
+              
    Example Code
    
+           
    +           
    
+          
    
+      
    
 
 
-
    
+      
    
 
 
-
-
-
+      
+      
+      
 
 
-
    
+      
    
 
-
    
-    
    Documentation
    
-
    
+        
    
+            
    Documentation
    
+        
    
 
-
    
-    
    Constructor
    
-
    
-
-
-    
-
-
-
-
-
    ParameterTypeDescription
    minimumInputLengthintNumber of characters necessary to start a search
    minimumResultsForSearchint
-    
    
-        The minimum number of results that must be initially (after opening the dropdown for the first time)
-        populated in order to keep the search field. This
-        is useful for cases where local data is used with just a few results, in which case the search box
-        is not very useful and wastes screen space.
-    
    
-    
    Only applies to single-value select boxes
    
-
    placeholderobject/string
-    
    Initial value that is selected if no other selection is made.
    
-    
    
-        The value can be specified either as an object or as a string. If
-        specified as a string any custom formatSelection function will be
-        bypassed and the string value will be rendered directly.
-    
    
-    
    The placeholder can also be specified as a data-placeholder attribute on the select
-        or input element that Select2 is attached to. In this case only string
-        values are supported
-    
    
+        
    
+            
    Constructor
    
+        
    
+        
+            
+                
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+                
+                
+                
+            
+            
+                
+                
+                
+            
+            
+                
+                
+                
-
-    
-    
-    
-
-
-    
-    
-    
-
-
-    
-    
-    
+            
+            
+            
+            
+            
+            
+            
+            
+            
-
-
-
-
-
-
-
-
-
+            
-
-    
-    
-    
-
-
-
-
-
    ParameterTypeDescription
    widthstring
+                Controls the width style attribute of the Select2 container div. The following values are supported:
+                
    
+                    
    off
    No width attribute will be set. Keep in mind that the container div copies classes from the source element so setting the width attribute may not always be necessary.
    
+                    
    element
    Uses javascript to calculate the width of the source element.
    
+                    
    copy
    Copies the value of the width style attribute set on the source element
    
+                    
    resolve
    First attempts to copy than falls back on element
    
+                    
    other values
    if the width attribute contains a function it will be avaluated, otherwise the value is used verbatim
    
+                
    
+            
    minimumInputLengthintNumber of characters necessary to start a search
    minimumResultsForSearchint
+                
    
+                    The minimum number of results that must be initially (after opening the dropdown for the first time)
+                    populated in order to keep the search field. This
+                    is useful for cases where local data is used with just a few results, in which case the search box
+                    is not very useful and wastes screen space.
+                
    
+                
    Only applies to single-value select boxes
    
+            
    maximumSelectionSizeint
+                
    
+                    The maximum number of items that can be selected in a multi-select control. If this number is less than 1 selection is not limited.
+                
    
+                
    Once the number of selected items reaches the maximum specified the contents of the dropdown will be populated
+                by the formatSelectionTooBig function
    
+            
    placeholderstring
+                
    Initial value that is selected if no other selection is made.
    
+                
    The placeholder can also be specified as a data-placeholder attribute on the select
+                    or input element that Select2 is attached to.
+                
    
 
-    
    Note that because browsers assume the first option element
-        is selected in
-        non-multi-value select boxes an empty first option element must be provided (<option></option>)
-        for the placeholder to work.
-    
    
+                
    Note that because browsers assume the first option element
+                    is selected in non-multi-value select boxes an empty first option element must be provided (<option></option>)
+                    for the placeholder to work.
+                
    
+            
    separatorstring
+                
    
+                    Separator character or string used to delimit ids in value attribute of the multi-valued selects.
+                    The default delimiter is the , character.
+                
    
+            
    allowClearboolean
+                    
    
+                        Whether or not a clear button is displayed when the select box has a selection. The
+                        button,
+                        when clicked, resets the value of the select box back to the placeholder, thus this option is
+                        only
+                        available when the placeholder is specified.
+                    
    
+                    
    When attached to a select an option with an empty value must be provided.
+                        This is the option that will be selected when the button is pressed since a select box requires
+                        at least one selection option.
    
+                    
    
+                        Also, note that this option only works with
+                        non-multi-value based selects because multi-value selects always provide such a button for every
+                        selected option.
+                    
    
+                
    multipleboolean
+                    
    
+                        Whether or not Select2 allows selection of multiple values.
+                    
    
+                    
    When Select2 is attached to a select element this value will be ignored and select's
+                        multiple attribute will be used instead.
+                    
    
+                
    closeOnSelectboolean
+                    
    
+                       If set to true the dropdown is not closed after a selection is made, allowing for rapid selection of multiple items. By default this option is disabled.
+                    
    
 
-    
    When Select2 is used in multi-select mode the placeholder must be a string.
    
-
    allowClearboolean
-        
    
-            Whether or not a clear button is displayed when the select box has a selection. The
-            button,
-            when clicked, resets the value of the select box back to the placeholder, thus this option is
-            only
-            available when the placeholder is specified.
-        
    
-        
    When attached to a select an option with an empty value must be provided.
-            This is the option that will be selected when the button is pressed since a select box requires
-            at least one selection option.
    
-        
    
-            Also, note that this option only works with
-            non-multi-value based selects because multi-value selects always provide such a button for every
-            selected option.
-        
    
-    
    multipleboolean
-        
    
-            Whether or not Select2 allows selection of multiple values.
-        
    
-        
    When Select2 is attached to a select element this value will be ignored and select's
-            multiple attribute will be used instead.
-        
    
-    
    closeOnSelectboolean
-        
    
-            If set to true the dropdown is not closed after a selection is made, allowing for rapid selection of multiple items. By default this option is disabled.
-        
    
+                    
    
+                        Only applies when configured in multi-select mode.
+                    
    
+                
    idfunction
+                   Function used to get the id from the choice object or a string representing the key under which the id is stored.
+                   
    id(object)
    
+                   
+                       
+                       
+                       
+                   
    ParameterTypeDescription
    objectobjectA choice object
    <returns>stringthe id of the object
    
+                   The default implementation expects the object to have a id property that is returned.
+            
    matcherfunction
+                Used to determine whether or not the search term matches an option when a built-in query function is used.
+                The built in query function is used when Select2 is attached to a select, or the local or tags helpers are used.
+                
    matcher(term, text, option)
    
+                
+                    
+                    
+                    
+                    
+                        
+                    
+                
    ParameterTypeDescription
    termstringsearch term
    textstringtext of the option being matched
    optionjquery objectthe option element we are trying to match. Only given when attached to select.
+                            Can be used to match against custom attributes on the option tag in addition to matching on the option's text.
    <returns>booleantrue if search term matches the text, or false otherwise
    
+                The default implementation is case insensitive and matches anywhere in ther term:
+                function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>0; }
+            
    formatSelectionfunction
+                Function used to render the current selection.
+                
    formatSelection(object, container)
    
+                
+                    
+                    
+                    
+                    
+                
    ParameterTypeDescription
    objectobjectThe selected result object returned from the query function
    containerjQuery objectjQuery wrapper of the node to which the selection should be appended
    <returns>string (optional)Html string, a DOM element, or a jQuery object that renders the selection
    
+                
    The default implementation expects the object to have a text property that is returned.
    
+                
    The implementation may choose to append elements directly to the provided container object, or return a single value and have it automatically appended
    
+                

    
+                
    
+                When attached to a select the original <option> (or <optgroup>) element is accessible inside the specified function through the property item.element:
+                
    +                    format(item) {
+                        var originalOption = item.element;
+                        return item.text
+                    }
+                
    
+                
    
+            
    formatResultfunction
+                Function used to render a result that the user can select.
+                
    formatResult(object, container, query)
    
+                
+                    
+                    
+                    
+                    
+                    
+                
    ParameterTypeDescription
    objectobjectOne of the result objects returned from the query function
    containerjQuery objectjQuery wrapper of the node that should contain the representation of the result
    queryobjectThe query object used to request this set of results
    <returns>string (optional)Html string, a DOM element, or a jQuery object that represents the result
    
+                
    The default implementation expects the object to have a text property that is returned.
    
+                
    The implementation may choose to append elements directly to the provided container object, or return a single value and have it automatically appended
    
+                

    
+                
    
+                When attached to a select the original <option> (or <optgroup>) element is accessible inside the specified function through the property item.element:
+                
    +                    format(item) {
+                        var originalOption = item.element;
+                        return item.text
+                    }
+                
    
+                
    
+            
    formatNoMatchesfunction
+                Function used to render the "No matches" message
+                
    formatNoMatches(term)
    
+                
+                    
+                    
+                    
+                
    ParameterTypeDescription
    termstringSearch string entered by user
    <returns>stringMessage html
    
+            
    formatInputTooShortfunction
+                Function used to render the "Search input too short" message
+                
    formatInputTooShort(term, minLength)
    
+                
+                    
+                    
+                    
+                    
+                
    ParameterTypeDescription
    termstringSearch string entered by user
    minLengthintMinimum required term length
    <returns>stringMessage html
    
+            
    formatSelectionTooBigfunction
+                Function used to render the "You cannot select any more choices" message
+                
    formatSelectionTooBig(maxSize)
    
+                
+                    
+                    
+                    
+                
    ParameterTypeDescription
    maxSizestringThe maximum specified size of the selection
    <returns>stringMessage html
    
+            
    createSearchChoicefunction
+                Creates a new selectable choice from user's search term. Allows creation of choices not available via the query
+                function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
+                
    createSearchChoice(term)
    
+                
+                    
+                    
+                    
+                
    ParameterTypeDescription
    termstringSearch string entered by user
    <returns>object (optional)Object representing the new choice.
+                        Must at least contain an id attribute.
    
+                If the function returns undefined or null no choice will be created. If a new
+                choice is created it is displayed first in the selection list so that user may select it by simply pressing
+                enter.
 
-        
    
-            Only applies when configured in multi-select mode.
-        
    
-    
    idfunction
-    Function used to get the id from the choice object or a string representing the key under which the id is stored.
-    
    id(object)
    
-    
-        
-        
-        
-    
    ParameterTypeDescription
    objectobjectA choice object
    <returns>stringthe id of the object
    
-    The default implementation expects the object to have a id property that is returned.
-
    matcherfunction
-    Used to determine whether or not the search term matches an option when a built-in query function is used.
-    The built in query function is used when Select2 is attached to a select, or the local or tags helpers are used.
-    
    matcher(term, text)
    
-    
-        
-        
-        
-        
-    
    ParameterTypeDescription
    termstringsearch term
    textstringtext of the option being matched
    <returns>booleantrue if search term matches the option text, or false otherwise
    
-    The default implementation is case insensitive and matches anywhere in ther term:
-    function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>0; }
-
    formatSelectionfunction
-    Function used to render the current selection.
-    
    formatSelection(object)
    
-    
-        
-        
-        
-    
    ParameterTypeDescription
    objectobjectThe selected result object returned from the query function
    <returns>stringHtml that represents the selection
    
-    The default implementation expects the object to have a text property that is returned.
-
    formatResultfunction
-    Function used to render a result that the user can select.
-    
    formatResult(object)
    
-    
-        
-        
-        
-    
    ParameterTypeDescription
    objectobjectOne of the result objects returned from the query function
    <returns>stringHtml that represents the result
    
-    The default implementation expects the object to have a text property that is returned.
-
    formatNoMatchesfunction
-    Function used to render the "No matches" message
-    
    formatNoMatches(term)
    
-    
-        
-        
-        
-    
    ParameterTypeDescription
    termstringSearch string entered by user
    <returns>stringMessage html
    
-
    formatInputTooShortfunction
-    Function used to render the "Search input too short" message
-    
    formatInputTooShort(term, minLength)
    
-    
-        
-        
-        
-        
-    
    ParameterTypeDescription
    termstringSearch string entered by user
    minLengthintMinimum required term length
    <returns>stringMessage html
    
-
    createSearchChoicefunction
-    Creates a new selectable choice from user's search term. Allows creation of choices not available via the query
-    function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
-    
    createSearchChoice(term)
    
-    
-        
-        
-        
-    
    ParameterTypeDescription
    termstringSearch string entered by user
    <returns>object (optional)Object representing the new choice.
-            Must at least contain an id attribute.
    
-    If the function returns undefined or null no choice will be created. If a new
-    choice is created it is displayed first in the selection list so that user may select it by simply pressing
-    enter.
-
-    
    When used in combination with input[type=hidden] tag care
-        must be taken to sanitize the id attribute of the choice object, especially stripping
-        , as it is used as a value separator
    
-
    initSelectionfunction
-    Called when Select2 is created to allow the user to initialize the selection based on the value of the
-    element select2 is attached to.
-    
    
-        Essentially this is an id->object mapping function.
-    
    
-    
    initSelection(element)
    
-    
-        
-        
-        
-    
    ParameterTypeDescription
    elementjQuery arrayelement Select2 is attached to
    <returns>object or array of objectsObject representing the choice
-            to be selected, or an array of such objects in case Select2 is in multi mode.
    
-    
    This function will only be called when there is initial input to be processed.
    
-    Here is an example implementation used for tags. Tags are the simplest form of data where the id is also
-    the text:
+                
    When used in combination with input[type=hidden] tag care
+                must be taken to sanitize the id attribute of the choice object, especially stripping
+                , as it is used as a value separator
    
+            
    initSelectionfunction
+                Called when Select2 is created to allow the user to initialize the selection based on the value of the
+                element select2 is attached to.
+                
    
+                Essentially this is an id->object mapping function.
+                
    
+                
    initSelection(element, callback)
    
+                
+                    
+                    
+                    
+                
    ParameterTypeDescription
    elementjQuery arrayelement Select2 is attached to
    callbackfunctioncallback function that should be called with the data which is either an object in case of a single select or an array of objects in case of multi-select
    
+                
    This function will only be called when there is initial input to be processed.
    
+                Here is an example implementation used for tags. Tags are the simplest form of data where the id is also
+                the text:
 
     $("#tags").select2({
-    initSelection : function (element) {
+    initSelection : function (element, callback) {
         var data = [];
         $(element.val().split(",")).each(function () {
             data.push({id: this, text: this});
         });
-        return data;
+        callback(data);
     }
 });
 
    
-
    queryfunction
-        Function used to query results for the search term.
-        
    query(options)
    
-        
-            
-            
-            
-            
-            
-                
+            
+                
+                
+                
-        
    ParameterTypeDescription
    options.termstringSearch string entered by user
    options.pageint1-based page number tracked by Select2 for use with infinite scrolling of results
    options.contextobjectAn object that persists across the lifecycle of queries for the same search term (the query to retrieve the initial results, and subsequent queries to retrieve more result pages for the same search term). When this function is first called for a new search term this object will be null. The user may choose to set any object in the results.context field - this object will then be used as the context parameter for all calls to the query method that will load more search results for the initial search term. The object will be reset back to null when a new search term is queried. This feature is useful when a page number is not easily mapped against the server side paging mechanism. For example, some server side paging mechanism may return a "continuation token" that needs to be passed back to them in order to retrieve the next page of search results.
    options.callbackfunctionCallback function that should be called with the result object. The result object:
+            
    queryfunction
+                    Function used to query results for the search term.
+                    
    query(options)
    
                     
-                        
-                        
-                        
+                        
+                        
+                        
+                        
+                            
    
                         
    ParameterTypeDescription
    result.results[object]Array of result objects. The default renderers expect objects with id and text keys. The id attribute is required, even if custom renderers are used.
    result.morebooleantrueif more results are available for the current search term
    results.contextobjectA user-defined object that should be made available as the context parameter to the query function on subsequent queries to load more result pages for the same search term. See the description of options.context parameter.
    options.termstringSearch string entered by user
    options.pageint1-based page number tracked by Select2 for use with infinite scrolling of results
    options.contextobjectAn object that persists across the lifecycle of queries for the same search term (the query to retrieve the initial results, and subsequent queries to retrieve more result pages for the same search term). When this function is first called for a new search term this object will be null. The user may choose to set any object in the results.context field - this object will then be used as the context parameter for all calls to the query method that will load more search results for the initial search term. The object will be reset back to null when a new search term is queried. This feature is useful when a page number is not easily mapped against the server side paging mechanism. For example, some server side paging mechanism may return a "continuation token" that needs to be passed back to them in order to retrieve the next page of search results.
    options.callbackfunctionCallback function that should be called with the result object. The result object:
+                                
+                                    
+                                    
+                                    
+                                    
+                                
    ParameterTypeDescription
    result.results[object]Array of result objects. The default renderers expect objects with id and text keys. The id attribute is required, even if custom renderers are used. The object may also contain a childrenkey if hierarchical data is displayed.
    result.morebooleantrueif more results are available for the current search term
    results.contextobjectA user-defined object that should be made available as the context parameter to the query function on subsequent queries to load more result pages for the same search term. See the description of options.context parameter.
    
+                            
    
                     
    
-                
    
-        
    In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
    
-    
    ajaxobject
-    Options for the built in ajax query function. This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses.
-
-    
-        
-        
-        
-        
-        
-        
-        
-    
    ParameterTypeDescription
    transportfunctionFunction that will be used to perform the ajax request. Must be parameter-compatible with $.ajax. Defaults to $.ajax if not specified.
-            Allows the use of various ajax wrapper libraries such as: AjaxManager. 
    urlstringAjax url
    dataTypestringData type for the request. ajax, jsonp, other formats supported by jquery
    quietMillisintNumber of milliseconds to wait for the user to stop typing before issuing the ajax request
    datafunction
-            Function to generate query parameters for the ajax request.
-            
    data(term, page)
    
-            
-                
-                
-                
-                
-                
-            
    ParameterTypeDescription
    termstringSearch term
    pageint1-based page number tracked by Select2 for use with infinite scrolling of results
    contextobjectSee options.context parameter to the query function above.
    <returns>objectObject containing url paramters
    
-        
    resultsfunction
-            Function used to build the query results object from the ajax response
-            
    results(data, page)
    
-            
-                
-                
-                
-                
-                
-            
    ParameterTypeDescription
    dataobjectRetrieved data
    pageintPage number that was passed into the data function above
    contextobjectSee options.context parameter to the query function above.
    <returns>objectResults object. See "options.callback" in the "query" function for format.
    
-        
    
-    
    In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
    
-
    dataarray/object
-    Options for the built in query function that works with arrays.
-    
    If this element contains an array, each element in the array must contain id and text keys
    
-    
    Alternatively, this element can be specified as an object in which results key must contain the data as an array and a text key can either be the name of the key in data items that contains text or a function that retrieves the text given a data element from the array
    
-
    tagsarray/function
-    Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via
-    this options attribute which is either an array or a function that returns an
-    array of objects or strings. If strings are used instead of objects
-    they will be converted into an object that has an id and text attribute equal
-    to the value of the string.
-
    
-
-
    
-    
    val
    
-
    
-
    Gets or sets the selection. If the value parameter is not specified, the id attribute of the currently selected element is returned. If the value parameter is specified it will become the current selection.
    
-
-    
-        
-    
-    
+      
    ParameterTypeDescription
    value (optional)object
-
-        
-            
-                
-            
-            
-                
-                
-                
-            
-            
-                
-                
-                
+                    
    In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
    
+                    
    
+                        
    Example Data
    
+                        
    +{
+     more: false,
+     results: [
+        { id: "CA", text: "California" },
+        { id: "AL", text: "Alabama" }
+     ]
+}
+                        
    
+                    
    
+                    
    
+                        
    Example Hierarchical Data
    
+                        
    +{
+    more: false,
+    results: [
+        { text: "Western", children: [
+            { id: "CA", text: "California" },
+            { id: "AZ", text: "Arizona" }
+        ] },
+        { text: "Eastern", children: [
+            { id: "FL", text: "Florida" }
+        ] }
+    ]
+}
+                        
    
+                    
    
+                
+            
+            
+            
    Single-ValuedMulti-Valued
    Attached to selectValue of the value attribute of the option that should be selectedArray of values specified to the left. null for empty.
    Attached to input[type=hidden]An object representing the selection. Should at least contain an id key. The rest of the keys should be determined by the custom rendering function, the default rendering function only needs an additional text keyArray of objects specified to the left. null for empty.
             
    ajaxobject
+                Options for the built in ajax query function. This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses.
 
+                
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                
    ParameterTypeDescription
    transportfunctionFunction that will be used to perform the ajax request. Must be parameter-compatible with $.ajax. Defaults to $.ajax if not specified.
+                        Allows the use of various ajax wrapper libraries such as: AjaxManager. 
    urlstringAjax url
    dataTypestringData type for the request. ajax, jsonp, other formats supported by jquery
    quietMillisintNumber of milliseconds to wait for the user to stop typing before issuing the ajax request
    datafunction
+                        Function to generate query parameters for the ajax request.
+                        
    data(term, page)
    
+                        
+                            
+                            
+                            
+                            
+                            
+                        
    ParameterTypeDescription
    termstringSearch term
    pageint1-based page number tracked by Select2 for use with infinite scrolling of results
    contextobjectSee options.context parameter to the query function above.
    <returns>objectObject containing url paramters
    
+                    
    resultsfunction
+                        Function used to build the query results object from the ajax response
+                        
    results(data, page)
    
+                        
+                            
+                            
+                            
+                            
+                            
+                        
    ParameterTypeDescription
    dataobjectRetrieved data
    pageintPage number that was passed into the data function above
    contextobjectSee options.context parameter to the query function above.
    <returns>objectResults object. See "options.callback" in the "query" function for format.
    
+                    
    
+                
    In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
    
+            
    dataarray/object
+                Options for the built in query function that works with arrays.
+                
    If this element contains an array, each element in the array must contain id and text keys
    
+                
    Alternatively, this element can be specified as an object in which results key must contain the data as an array and a text key can either be the name of the key in data items that contains text or a function that retrieves the text given a data element from the array
    
+            
    tagsarray/function
+                Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via
+                this options attribute which is either an array or a function that returns an
+                array of objects or strings. If strings are used instead of objects
+                they will be converted into an object that has an id and text attribute equal
+                to the value of the string.
+            
    
         
    
 
+      
    
+          
    val
    
+      
    
+      
    Gets or sets the selection. If the value parameter is not specified, the id attribute of the currently selected element is returned. If the value parameter is specified it will become the current selection.
    
+      
+          
+              
+          
+          
-
    ParameterTypeDescription
    value (optional)object
 
-    
    
-Example: 
    alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});
    
+              
+                    
+                        
+                    
+                    
+                        
+                        
+                        
+                    
+                  
+                      
+                      
+                      
+                  
 
-
    
-    
    destroy
    
-
    
-
    Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.
    
+              
    Single-ValuedMulti-Valued
    Attached to selectValue of the value attribute of the option that should be selectedArray of the value attributes of the options that should be selected. null for empty.
    Attached to input[type=hidden]Id of the object that should be selected. "" to clear. Can only be used if initSelection() was specified.An array of objects ids that should be selected. "" to clear. Can only be used if initSelection() was specified.
    
+          
    
+        
    val method invoked on a single-select with an unset value will return "", while a val method invoked on an empty multi-select will return []
    
 
-
    
-    
    open
    
-
    
-
    Opens the dropdown
    
-
    
-    
    close
    
-
    
-
    Closes the dropdown
    
-
    
-    
    disable
    
-
    
-
    Disables Select2. During this mode the user is not allowed to manipulate the selection.
    
-
    
-    
    enable
    
-
    
-
    Enables Select2.
    
+        Example: 
    alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});
    
 
-
    
-    
    container
    
-
    
-
    Retrieves the main container element that wraps all of DOM added by Select2
-    Example: console.log($("#tags").select2("container"));
    
-
    
-    
    onSortStart
    
-
    
-
    Notifies Select2 that a drag and drop sorting operation has started. Select2 will hide all non-selection list items such as the search container, etc.
-    Example: $("#tags").select2("onSortStart");
    
-
    
-    
    onSortEnd
    
-
    
-
    Notifies Select2 that a drag and drop sorting operation has finished. Select2 will re-display any elements previously hidden and update the selection of the element it is attached to.
-    Example: $("#tags").select2("onSortEnd");
-
    
+        
    
+            
    data
    
+        
    
+        
    Gets or sets the selection. Analogous to val method, but works with objects instead of ids.
    
+        
    data method invoked on a single-select with an unset value will return null, while a data method invoked on an empty multi-select will return []
    
 
 
-
    
-    
    Events
    
-
    
-
-
    
-    
    
-        
    change
    
-        
    Fired when selection is changed.
    
-        
    This event is not fired when the selection is changed using Select2's val() method.
    
+    
    
+        
    destroy
    
     
    
-
    
+    
    Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.
    
+
+    
    
+        
    open
    
+    
    
+    
    Opens the dropdown
    
+    
    
+        
    close
    
+    
    
+    
    Closes the dropdown
    
+    
    
+        
    disable
    
+    
    
+    
    Disables Select2. During this mode the user is not allowed to manipulate the selection.
    
+    
    
+        
    enable
    
+    
    
+    
    Enables Select2.
    
+
+    
    
+    
    container
    
+    
    
+    
    Retrieves the main container element that wraps all of DOM added by Select2
+        Example: console.log($("#tags").select2("container"));
    
+    
    
+        
    onSortStart
    
+    
    
+    
    Notifies Select2 that a drag and drop sorting operation has started. Select2 will hide all non-selection list items such as the search container, etc.
+        Example: $("#tags").select2("onSortStart");
    
+    
    
+        
    onSortEnd
    
+    
    
+    
    Notifies Select2 that a drag and drop sorting operation has finished. Select2 will re-display any elements previously hidden and update the selection of the element it is attached to.
+        Example: $("#tags").select2("onSortEnd");
+    
    
 
 
-
+        
    
+          
    Events
    
+      
    
+
+      
    
+          
    
+              
    change
    
+              
    Fired when selection is changed.
    
+              
    This event is not fired when the selection is changed using Select2's val() method.
    
+              
    The event object contains the following custom properties:
+              
    
+              
    val
    the current selection (taking into account the result of the change) - id or array of ids
    
+              
    added
    the added element, if any - the full element object, not just the id
    
+              
    removed
    the removed element, if any - the full element object, not just the id
    
+                
    
+              
    
+          
    
+      
    
+        
    
+            
    
+                
    open
    
+                
    Fired when the dropdown is shown.
    
+                
    The event listener can prevent the opening by calling preventDefault() on the supplied event object.
    
+                
    
+            
    
+        
    
+
+      
+
+    
    
+        
    
+            
    Configuring Defaults
    
+            Select2 exposes its default options via the $.fn.select2.defaults object. Properties changed in this object (same properties configurable through the constructor) will take effect for every instance created after the change
+
+        
    
+    
    
+
+
diff --git a/select-2.1.html b/select-2.1.html
new file mode 100755
index 00000000..6954635c
--- /dev/null
+++ b/select-2.1.html
@@ -0,0 +1,1010 @@
+---
+layout: main
+title: Select2 2.1
+group: navigation
+version: 2.1
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    
+    
    
+        
+    
    
+
    
+
+
+
    
+    
    Changelog from 2.0
    
+    
    
+        
      
+            
    • Added support for disabled mode. See Disabled Mode example
      • 
+            
    • Added ability to provide custom matcher functions. See Custom Matcher Function example
      • 
+            
    • Minimum required jQuery version bumped to 1.4.4
      • 
+        
    
+    
    
+    
    Changelog from 1.0
    
+    
    
+        
      
+            
    • Support for selection of multiple values. See multiple option in the docs.
      • 
+            
    • Built-in tagging support. See the Tagging example.
      • 
+            
    • Ability to reset back to placeholder once a selection has been made. See allowClear option in the docs.
      • 
+            
    • Simplified paging of remote datasets by tracking the page number automatically.
      • 
+            
    • Minimum required jQuery version changed from 1.7+ to 1.4.2
      • 
+        
    
+    
    
+
    
+
+
    
+    
    Browser Compatibility
    
+    
      
+        
    • IE 8+ (7 mostly works except for issue with z-index)
      • 
+        
    • Chrome 8+
      • 
+        
    • Firefox 3.5+
      • 
+        
    • Safari 3+
      • 
+        
    • Opera 10.6+
      • 
+    
    
+
    
+
+
    
+
    
+    
    
+        
    Examples
    
+        
    
+    
    
+
    
+
+
+
    
+    
    
+        
    The Basics
    
+        
    Select2 can take a regular select box like this:
    
+        
    
+        
    and turns it into:
    
+        
    
+            
    
+        
    
+        
    with support for quick option filtering via a search box
    
+    
    
+    
    
+        
    Example Code
    
+
    +<head>
+    <link href="select2.css" rel="stylesheet"/>
+    <script src="select2.js"></script>
+    <script>
+        $(document).ready(function() { $("#e1").select2(); });
+    </script>
+</head>
+<body>
+    <select id="e1">
+        <option value="AL">Alabama</option>
+        ...
+        <option value="WY">Wyoming</option>
+    </select>
+</body>
+
    
+    
    
+
    
+
+
    
+    
    
+        
    Multi-Value Select Boxes
    
+        
    Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute. Select2 automatially picks up on this:
    
+        
    
+            
    
+        
    
+    
    
+    
    
+        
    Example Code
    
+          
    +          
    
+    
    
+
    
+
+
+
    
+    
+    
    
+        
    Placeholders
    
+        
    A placeholder value can be defined and will be displayed until a selection is made:
    
+        
    
+            
    
+        
    
+        
    
+            
    
+        
    
+        
    The placeholder can be declared via a data-placeholder attribute attached to the select, or via the placeholder configuration element as seen in the example code
    
+        
    Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.
    
+
+    
    
+    
    
+        
    Example Code
    
+            
    +            
    
+    
    
+
    
+
+
    
+    
    
+        
    Minimum Input
    
+        
    Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful:
    
+        
    
+            
    
+        
    
+    
    
+    
    
+        
    Example Code
    
+        
    
+    
    
+
    
+
+
    
+    
    
+        
    Templating
    
+        
    Various display options of the Select2 component can be changed:
    
+        
    
+            
    
+        
    
+    
    
+    
    
+        
    Example Code
    
+        
    
+    
    
+
    
+
+
    
+    
    
+        
    Loading Data
    
+        
    Select2 uses a function to load result data. Here is a trivial example that creates choices that consist of user's input repeated a number of times:
    
+        
    
+            
+        
    
+        
    In order to take advantage of custom data loading Select2 should be attached to an input type='hidden' tag, otherwise data is parsed from select's option tags.
    
+    
    
+    
    
+        
    Example Code
    
+            
    +            
    
+    
    
+
    
+
+
    
+    
    
+        
    Loading Array Data
    
+        
    Select2 provides some shortcuts that make it easy to access local data stored in an array instead of having to write a query function mentioned in the example above.
    
+        
    Example below inlines the data by specifying an array in the data element. Items in such an array must have id and text keys.
    
+        
    
+            
+        
    
+        
    If your data does not have a text key, an alternative key can be specified as a string:
    
+        
    
+            
+        
    
+        
    or as a function:
    
+        
    
+            
+        
    
+    
    
+    
    
+        
    Example Code
    
+           
    +           
    
+    
    
+
    
+
+
    
+    
    
+        
    Loading Remote Data
    
+        
    Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:
    
+        
    
+            
+        
    
+        
    If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.
    
+        
    Example Code
    
+        
    
+        
    Select2 uses jQuery's $.ajax function to execute the remote call by default. An alternative transport function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom query function instead of using the ajax helper
    
+    
    
+
    
+
    
+    
    
+        
    Infinite Scroll with Remote Data
    
+        
    Select2 supports lazy-appending of results when the result list is scrolled to the end.
+            In order to enable the remote service must support some sort of a paging mechanism and
+            the query function given to Select2 must take advantage of it. The following example demonstrates
+            how this can be set up. Search for some keyword and then scroll the result list to the end to
+            see more results load:
    
+        
    
+            
+        
    
+        
    If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.
    
+        
    Example Code
    
+        
    
+    
    
+
    
+
+
    
+    
+    
    
+        
    Programmatic Access
    
+        
    Select2 supports methods that allow programmatic control of the component
    
+        
    
+            
+            
+            
+            
+        
    
+        
    
+            
    
+        
    
+        
    
+            
+            
+            
+            
+        
    
+        
    
+            
    
+        
    
+    
    
+    
    
+        
    Example Code
    
+        
    
+    
    
+
    
+
+
    
+    
+    
    
+        
    Change Event
    
+
+        
    Select2 triggers the change event on the original element whenever its value is changed by
+            the user
    
+
+        
    
+
+        
    
+
+        
    
+    
    
+    
    
+        
    Example Code
    
+           
    +           
    
+    
    
+
    
+
    
+    
+    
    
+        
    Tagging Support
    
+
+        
    Select2 can be used to quickly set up fields used for tagging
    
+
+        
    
+        
    Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by
+            picking the first choice which is what the user has typed into the search box so far.
    
+    
    
+    
    
+        
    Example Code
    
+           
    +           
    
+    
    
+
    
+
+
    
+    
+    
    
+        
    Reacting to external value changes
    
+
+        
    Select2 can react to external value changes and keep its selection in-sync. This feature allows
+            Select2 to work seamlessly with front-end frameworks that use data binding between ui components
+            and model values.
    
+        

    
+        
     
    
+        
    This feature is only available when initSelection() function is provided in
+            the options. This function is needed to map the choice ids set on the element to objects used by
+            Select2. This function is set by default when Select2 is attached to a select or when
+            the tags helper function is used.
    
+    
    
+    
    
+        
    Example Code
    
+           
    +           
    
+    
    
+
    
+
+
    
+    
+    
    
+        
    Select2 Lifecycle
    
+
+        
    
+
+        
    
+        

    
+        
     
    
+    
    
+    
    
+        
    Example Code
    
+           
    +           
    
+    
    
+
    
+
+
    
+    
+    
    
+        
    Select2 Drag and Drop Sorting
    
+        
    
+            Select2 supports drag and drop sorting of selected choices. Select2 does not, itself, provide the necessary code to perform dragging and dropping, instead it provides hooks that other libraries can use to provide the behavior. In this example we are using JQuery UI's sortable() plugin.
+        
    
+        
    The sorting is only available when Select2 is attached to a hidden input field.
    
+        
    
+        
    
+    
    
+    
    
+        
    Example Code
    
+           
    +           
    
+    
    
+
    
+
+
+
    
+    
+    
    
+        
    Select2 Disabled Mode
    
+        

    
+        

    
+        
     
    
+    
    
+    
    
+        
    Example Code
    
+           
    +           
    
+    
    
+
    
+
+
    
+    
+    
    
+        
    Custom Matcher
    
+        
    Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere
    
+        

    
+    
    
+    
    
+        
    Example Code
    
+           
    +           
    
+    
    
+
    
+
+
+
    
+
+
+
+
+
+
+
+
    
+
+
    
+    
    Documentation
    
+
    
+
+
    
+    
    Constructor
    
+
    
+
+
+    
+
+
+
+
+
+
+    
+    
+    
+
+
+    
+    
+    
+
+
+    
+    
+    
+
+
+
+
+
+
+
+
+
+
+    
+    
+    
+
+
+
+
+
    ParameterTypeDescription
    minimumInputLengthintNumber of characters necessary to start a search
    minimumResultsForSearchint
+    
    
+        The minimum number of results that must be initially (after opening the dropdown for the first time)
+        populated in order to keep the search field. This
+        is useful for cases where local data is used with just a few results, in which case the search box
+        is not very useful and wastes screen space.
+    
    
+    
    Only applies to single-value select boxes
    
+
    placeholderobject/string
+    
    Initial value that is selected if no other selection is made.
    
+    
    
+        The value can be specified either as an object or as a string. If
+        specified as a string any custom formatSelection function will be
+        bypassed and the string value will be rendered directly.
+    
    
+    
    The placeholder can also be specified as a data-placeholder attribute on the select
+        or input element that Select2 is attached to. In this case only string
+        values are supported
+    
    
+
+    
    Note that because browsers assume the first option element
+        is selected in
+        non-multi-value select boxes an empty first option element must be provided (<option></option>)
+        for the placeholder to work.
+    
    
+
+    
    When Select2 is used in multi-select mode the placeholder must be a string.
    
+
    allowClearboolean
+        
    
+            Whether or not a clear button is displayed when the select box has a selection. The
+            button,
+            when clicked, resets the value of the select box back to the placeholder, thus this option is
+            only
+            available when the placeholder is specified.
+        
    
+        
    When attached to a select an option with an empty value must be provided.
+            This is the option that will be selected when the button is pressed since a select box requires
+            at least one selection option.
    
+        
    
+            Also, note that this option only works with
+            non-multi-value based selects because multi-value selects always provide such a button for every
+            selected option.
+        
    
+    
    multipleboolean
+        
    
+            Whether or not Select2 allows selection of multiple values.
+        
    
+        
    When Select2 is attached to a select element this value will be ignored and select's
+            multiple attribute will be used instead.
+        
    
+    
    closeOnSelectboolean
+        
    
+            If set to true the dropdown is not closed after a selection is made, allowing for rapid selection of multiple items. By default this option is disabled.
+        
    
+
+        
    
+            Only applies when configured in multi-select mode.
+        
    
+    
    idfunction
+    Function used to get the id from the choice object or a string representing the key under which the id is stored.
+    
    id(object)
    
+    
+        
+        
+        
+    
    ParameterTypeDescription
    objectobjectA choice object
    <returns>stringthe id of the object
    
+    The default implementation expects the object to have a id property that is returned.
+
    matcherfunction
+    Used to determine whether or not the search term matches an option when a built-in query function is used.
+    The built in query function is used when Select2 is attached to a select, or the local or tags helpers are used.
+    
    matcher(term, text)
    
+    
+        
+        
+        
+        
+    
    ParameterTypeDescription
    termstringsearch term
    textstringtext of the option being matched
    <returns>booleantrue if search term matches the option text, or false otherwise
    
+    The default implementation is case insensitive and matches anywhere in ther term:
+    function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>0; }
+
    formatSelectionfunction
+    Function used to render the current selection.
+    
    formatSelection(object)
    
+    
+        
+        
+        
+    
    ParameterTypeDescription
    objectobjectThe selected result object returned from the query function
    <returns>stringHtml that represents the selection
    
+    The default implementation expects the object to have a text property that is returned.
+
    formatResultfunction
+    Function used to render a result that the user can select.
+    
    formatResult(object)
    
+    
+        
+        
+        
+    
    ParameterTypeDescription
    objectobjectOne of the result objects returned from the query function
    <returns>stringHtml that represents the result
    
+    The default implementation expects the object to have a text property that is returned.
+
    formatNoMatchesfunction
+    Function used to render the "No matches" message
+    
    formatNoMatches(term)
    
+    
+        
+        
+        
+    
    ParameterTypeDescription
    termstringSearch string entered by user
    <returns>stringMessage html
    
+
    formatInputTooShortfunction
+    Function used to render the "Search input too short" message
+    
    formatInputTooShort(term, minLength)
    
+    
+        
+        
+        
+        
+    
    ParameterTypeDescription
    termstringSearch string entered by user
    minLengthintMinimum required term length
    <returns>stringMessage html
    
+
    createSearchChoicefunction
+    Creates a new selectable choice from user's search term. Allows creation of choices not available via the query
+    function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
+    
    createSearchChoice(term)
    
+    
+        
+        
+        
+    
    ParameterTypeDescription
    termstringSearch string entered by user
    <returns>object (optional)Object representing the new choice.
+            Must at least contain an id attribute.
    
+    If the function returns undefined or null no choice will be created. If a new
+    choice is created it is displayed first in the selection list so that user may select it by simply pressing
+    enter.
+
+    
    When used in combination with input[type=hidden] tag care
+        must be taken to sanitize the id attribute of the choice object, especially stripping
+        , as it is used as a value separator
    
+
    initSelectionfunction
+    Called when Select2 is created to allow the user to initialize the selection based on the value of the
+    element select2 is attached to.
+    
    
+        Essentially this is an id->object mapping function.
+    
    
+    
    initSelection(element)
    
+    
+        
+        
+        
+    
    ParameterTypeDescription
    elementjQuery arrayelement Select2 is attached to
    <returns>object or array of objectsObject representing the choice
+            to be selected, or an array of such objects in case Select2 is in multi mode.
    
+    
    This function will only be called when there is initial input to be processed.
    
+    Here is an example implementation used for tags. Tags are the simplest form of data where the id is also
+    the text:
+
    +$("#tags").select2({
+    initSelection : function (element) {
+        var data = [];
+        $(element.val().split(",")).each(function () {
+            data.push({id: this, text: this});
+        });
+        return data;
+    }
+});
+
    
+
    queryfunction
+        Function used to query results for the search term.
+        
    query(options)
    
+        
+            
+            
+            
+            
+            
+                
+        
    ParameterTypeDescription
    options.termstringSearch string entered by user
    options.pageint1-based page number tracked by Select2 for use with infinite scrolling of results
    options.contextobjectAn object that persists across the lifecycle of queries for the same search term (the query to retrieve the initial results, and subsequent queries to retrieve more result pages for the same search term). When this function is first called for a new search term this object will be null. The user may choose to set any object in the results.context field - this object will then be used as the context parameter for all calls to the query method that will load more search results for the initial search term. The object will be reset back to null when a new search term is queried. This feature is useful when a page number is not easily mapped against the server side paging mechanism. For example, some server side paging mechanism may return a "continuation token" that needs to be passed back to them in order to retrieve the next page of search results.
    options.callbackfunctionCallback function that should be called with the result object. The result object:
+                    
+                        
+                        
+                        
+                        
+                    
    ParameterTypeDescription
    result.results[object]Array of result objects. The default renderers expect objects with id and text keys. The id attribute is required, even if custom renderers are used.
    result.morebooleantrueif more results are available for the current search term
    results.contextobjectA user-defined object that should be made available as the context parameter to the query function on subsequent queries to load more result pages for the same search term. See the description of options.context parameter.
    
+                
    
+        
    In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
    
+    
    ajaxobject
+    Options for the built in ajax query function. This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses.
+
+    
+        
+        
+        
+        
+        
+        
+        
+    
    ParameterTypeDescription
    transportfunctionFunction that will be used to perform the ajax request. Must be parameter-compatible with $.ajax. Defaults to $.ajax if not specified.
+            Allows the use of various ajax wrapper libraries such as: AjaxManager. 
    urlstringAjax url
    dataTypestringData type for the request. ajax, jsonp, other formats supported by jquery
    quietMillisintNumber of milliseconds to wait for the user to stop typing before issuing the ajax request
    datafunction
+            Function to generate query parameters for the ajax request.
+            
    data(term, page)
    
+            
+                
+                
+                
+                
+                
+            
    ParameterTypeDescription
    termstringSearch term
    pageint1-based page number tracked by Select2 for use with infinite scrolling of results
    contextobjectSee options.context parameter to the query function above.
    <returns>objectObject containing url paramters
    
+        
    resultsfunction
+            Function used to build the query results object from the ajax response
+            
    results(data, page)
    
+            
+                
+                
+                
+                
+                
+            
    ParameterTypeDescription
    dataobjectRetrieved data
    pageintPage number that was passed into the data function above
    contextobjectSee options.context parameter to the query function above.
    <returns>objectResults object. See "options.callback" in the "query" function for format.
    
+        
    
+    
    In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
    
+
    dataarray/object
+    Options for the built in query function that works with arrays.
+    
    If this element contains an array, each element in the array must contain id and text keys
    
+    
    Alternatively, this element can be specified as an object in which results key must contain the data as an array and a text key can either be the name of the key in data items that contains text or a function that retrieves the text given a data element from the array
    
+
    tagsarray/function
+    Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via
+    this options attribute which is either an array or a function that returns an
+    array of objects or strings. If strings are used instead of objects
+    they will be converted into an object that has an id and text attribute equal
+    to the value of the string.
+
    
+
+
    
+    
    val
    
+
    
+
    Gets or sets the selection. If the value parameter is not specified, the id attribute of the currently selected element is returned. If the value parameter is specified it will become the current selection.
    
+
+    
+        
+    
+    
+
    ParameterTypeDescription
    value (optional)object
+
+        
+            
+                
+            
+            
+                
+                
+                
+            
+            
+                
+                
+                
+            
+
+        
    Single-ValuedMulti-Valued
    Attached to selectValue of the value attribute of the option that should be selectedArray of values specified to the left. null for empty.
    Attached to input[type=hidden]An object representing the selection. Should at least contain an id key. The rest of the keys should be determined by the custom rendering function, the default rendering function only needs an additional text keyArray of objects specified to the left. null for empty.
    
+
+
+    
    
+Example: 
    alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});
    
+
+
    
+    
    destroy
    
+
    
+
    Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.
    
+
+
    
+    
    open
    
+
    
+
    Opens the dropdown
    
+
    
+    
    close
    
+
    
+
    Closes the dropdown
    
+
    
+    
    disable
    
+
    
+
    Disables Select2. During this mode the user is not allowed to manipulate the selection.
    
+
    
+    
    enable
    
+
    
+
    Enables Select2.
    
+
+
    
+    
    container
    
+
    
+
    Retrieves the main container element that wraps all of DOM added by Select2
+    Example: console.log($("#tags").select2("container"));
    
+
    
+    
    onSortStart
    
+
    
+
    Notifies Select2 that a drag and drop sorting operation has started. Select2 will hide all non-selection list items such as the search container, etc.
+    Example: $("#tags").select2("onSortStart");
    
+
    
+    
    onSortEnd
    
+
    
+
    Notifies Select2 that a drag and drop sorting operation has finished. Select2 will re-display any elements previously hidden and update the selection of the element it is attached to.
+    Example: $("#tags").select2("onSortEnd");
+
    
+
+
+
    
+    
    Events
    
+
    
+
+
    
+    
    
+        
    change
    
+        
    Fired when selection is changed.
    
+        
    This event is not fired when the selection is changed using Select2's val() method.
    
+    
    
+
    
+
+
+
    
diff --git a/select2-3.0/README.md b/select2-3.0/README.md
new file mode 100755
index 00000000..b00a4f2b
--- /dev/null
+++ b/select2-3.0/README.md
@@ -0,0 +1,67 @@
+Select2
+=================
+
+Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent [Chosen](http://harvesthq.github.com/chosen/) library.
+
+To get started -- checkout http://ivaynberg.github.com/select2!
+
+What Does Select2 Support That Chosen Does Not?
+-------------------------------------------------
+
+* Working with large datasets: Chosen requires the entire dataset to be loaded as `option` tags in the DOM, which limits
+it to working with small-ish datasets. Select2 uses a function to find results on-the-fly, which allows it to partially
+load results.
+* Paging of results: Since Select2 works with large datasets and only loads a small amount of matching results at a time
+it has to support paging. Select2 will call the search function when the user scrolls to the bottom of currently loaded
+result set allowing for the 'infinite scrolling' of results.
+* Custom markup for results: Chosen only supports rendering text results because that is the only markup supported by
+`option` tags. Select2 provides an extension point which can be used to produce any kind of markup to represent results.
+* Ability to add results on the fly: Select2 provides the ability to add results from the search term entered by the user, which allows it to be used for
+tagging.
+
+Browser Compatibility
+--------------------
+* IE 8+ (7 mostly works except for [issue with z-index](https://github.com/ivaynberg/select2/issues/37))
+* Chrome 8+
+* Firefox 3.5+
+* Safari 3+
+* Opera 10.6+
+
+Integrations
+------------
+
+* [Wicket-Select2](https://github.com/ivaynberg/wicket-select2) (Java / Apache Wicket)
+* [select2-rails](https://github.com/argerim/select2-rails) (Ruby on Rails)
+* [AngularUI](http://angular-ui.github.com/#directives-select2) ([AngularJS](angularjs.org))
+
+Bug tracker
+-----------
+
+Have a bug? Please create an issue here on GitHub!
+
+https://github.com/ivaynberg/select2/issues
+
+
+Mailing list
+------------
+
+Have a question? Ask on our mailing list!
+
+select2@googlegroups.com
+
+https://groups.google.com/d/forum/select2
+
+
+Copyright and License
+---------------------
+
+Copyright 2012 Igor Vaynberg
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in
+compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations under the License.
\ No newline at end of file
diff --git a/select2-3.0/select2.css b/select2-3.0/select2.css
new file mode 100755
index 00000000..ca1df64a
--- /dev/null
+++ b/select2-3.0/select2.css
@@ -0,0 +1,514 @@
+/*
+Version: 3.0 Timestamp: Tue Jul 31 21:09:16 PDT 2012
+*/
+.select2-container {
+    position: relative;
+    display: inline-block;
+    /* inline-block for ie7 */
+    zoom: 1;
+    *display: inline;
+
+}
+
+.select2-container,
+.select2-drop,
+.select2-search,
+.select2-search input{
+  /*
+    Force border-box so that % widths fit the parent
+    container without overlap because of margin/padding.
+
+    More Info : http://www.quirksmode.org/css/box.html
+  */
+  -moz-box-sizing: border-box;    /* firefox */
+  -ms-box-sizing: border-box;     /* ie */
+  -webkit-box-sizing: border-box; /* webkit */
+  -khtml-box-sizing: border-box;  /* konqueror */
+  box-sizing: border-box;         /* css3 */
+}
+
+.select2-container .select2-choice {
+    background-color: #fff;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
+    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
+    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
+    background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
+    background-image: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
+    background-image: linear-gradient(top, #eeeeee 0%, #ffffff 50%);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #aaa;
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    height: 26px;
+    line-height: 26px;
+    padding: 0 0 0 8px;
+    color: #444;
+    text-decoration: none;
+}
+
+.select2-container.select2-drop-above .select2-choice
+{
+    border-bottom-color: #aaa;
+    -webkit-border-radius:0px 0px 4px 4px;
+    -moz-border-radius:0px 0px 4px 4px;
+    border-radius:0px 0px 4px 4px;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white));
+    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%);
+    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%);
+    background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%);
+    background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
+    background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%);
+}
+
+.select2-container .select2-choice span {
+    margin-right: 26px;
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    -o-text-overflow: ellipsis;
+    -ms-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+}
+
+.select2-container .select2-choice abbr {
+  display: block;
+  position: absolute;
+  right: 26px;
+  top: 8px;
+  width: 12px;
+  height: 12px;
+  font-size: 1px;
+  background: url('select2.png') right top no-repeat;
+  cursor: pointer;
+  text-decoration: none;
+  border:0;
+  outline: 0;
+}
+.select2-container .select2-choice abbr:hover {
+  background-position: right -11px;
+  cursor: pointer;
+}
+
+.select2-drop {
+    background: #fff;
+    color: #000;
+    border: 1px solid #aaa;
+    border-top: 0;
+    position: absolute;
+    top: 100%;
+    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+    -o-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+    box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+    z-index: 9999;
+    width:100%;
+    margin-top:-1px;
+
+  -webkit-border-radius: 0 0 4px 4px;
+  -moz-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+}
+
+.select2-drop.select2-drop-above {
+    -webkit-border-radius: 4px 4px 0px 0px;
+    -moz-border-radius: 4px 4px 0px 0px;
+    border-radius: 4px 4px 0px 0px;
+    margin-top:1px;
+    border-top: 1px solid #aaa;
+    border-bottom: 0;
+
+    -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+    -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+    -o-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+    box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+}
+
+.select2-container .select2-choice div {
+    -webkit-border-radius: 0 4px 4px 0;
+    -moz-border-radius: 0 4px 4px 0;
+    border-radius: 0 4px 4px 0;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    background: #ccc;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
+    background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
+    background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
+    background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
+    background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
+    background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
+    border-left: 1px solid #aaa;
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: block;
+    height: 100%;
+    width: 18px;
+}
+
+.select2-container .select2-choice div b {
+    background: url('select2.png') no-repeat 0 1px;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.select2-search {
+  display: inline-block;
+    white-space: nowrap;
+    z-index: 10000;
+  min-height: 26px;
+  width: 100%;
+  margin: 0;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.select2-search-hidden {
+  display: block;
+  position: absolute;
+  left: -10000px;
+}
+
+.select2-search input {
+    background: #fff url('select2.png') no-repeat 100% -22px;
+    background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+    background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+    background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+    background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+    background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
+    background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
+    padding: 4px 20px 4px 5px;
+    outline: 0;
+    border: 1px solid #aaa;
+    font-family: sans-serif;
+    font-size: 1em;
+    width:100%;
+    margin:0;
+    height:auto !important;
+    min-height: 26px;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    border-radius: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+}
+
+.select2-drop.select2-drop-above .select2-search input
+{
+    margin-top:4px;
+}
+
+.select2-search input.select2-active {
+    background: #fff url('spinner.gif') no-repeat 100%;
+    background: url('spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+    background: url('spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+    background: url('spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+    background: url('spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+    background: url('spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
+    background: url('spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
+}
+
+
+.select2-container-active .select2-choice,
+.select2-container-active .select2-choices {
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
+    -moz-box-shadow   : 0 0 5px rgba(0,0,0,.3);
+    -o-box-shadow     : 0 0 5px rgba(0,0,0,.3);
+    box-shadow        : 0 0 5px rgba(0,0,0,.3);
+    border: 1px solid #5897fb;
+    outline: none;
+}
+
+.select2-dropdown-open .select2-choice {
+  border: 1px solid #aaa;
+  border-bottom-color: transparent;
+  -webkit-box-shadow: 0 1px 0 #fff inset;
+  -moz-box-shadow   : 0 1px 0 #fff inset;
+  -o-box-shadow     : 0 1px 0 #fff inset;
+  box-shadow        : 0 1px 0 #fff inset;
+  background-color: #eee;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
+  background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
+  background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
+  background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
+  background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
+  background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
+  -webkit-border-bottom-left-radius : 0;
+  -webkit-border-bottom-right-radius: 0;
+  -moz-border-radius-bottomleft : 0;
+  -moz-border-radius-bottomright: 0;
+  border-bottom-left-radius : 0;
+  border-bottom-right-radius: 0;
+}
+
+.select2-dropdown-open .select2-choice div {
+  background: transparent;
+  border-left: none;
+}
+.select2-dropdown-open .select2-choice div b {
+  background-position: -18px 1px;
+}
+
+/* results */
+.select2-results {
+  margin: 4px 4px 4px 0;
+  padding: 0 0 0 4px;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 200px;
+}
+
+.select2-results ul.select2-result-sub {
+  margin: 0 0 0 0;
+}
+
+.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
+.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
+
+.select2-results li {
+  list-style: none;
+  display: list-item;
+}
+
+.select2-results li.select2-result-with-children > .select2-result-label {
+  font-weight: bold;
+}
+
+.select2-results .select2-result-label {
+  padding: 3px 7px 4px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.select2-results .select2-highlighted {
+  background: #3875d7;
+  color: #fff;
+}
+.select2-results li em {
+  background: #feffde;
+  font-style: normal;
+}
+.select2-results .select2-highlighted em {
+  background: transparent;
+}
+.select2-results .select2-no-results {
+  background: #f4f4f4;
+  display: list-item;
+}
+
+.select2-results .select2-selection-limit {
+  background: #f4f4f4;
+  display: list-item;
+}
+
+/*
+disabled look for already selected choices in the results dropdown
+.select2-results .select2-disabled.select2-highlighted {
+    color: #666;
+    background: #f4f4f4;
+    display: list-item;
+    cursor: default;
+}
+.select2-results .select2-disabled {
+  background: #f4f4f4;
+  display: list-item;
+  cursor: default;
+}
+*/
+.select2-results .select2-disabled {
+    display: none;
+}
+
+.select2-more-results.select2-active {
+    background: #f4f4f4 url('spinner.gif') no-repeat 100%;
+}
+
+.select2-more-results {
+  background: #f4f4f4;
+  display: list-item;
+}
+
+/* disabled styles */
+
+.select2-container.select2-container-disabled .select2-choice {
+    background-color: #f4f4f4;
+    background-image: none;
+    border: 1px solid #ddd;
+    cursor: default;
+}
+
+.select2-container.select2-container-disabled .select2-choice div {
+    background-color: #f4f4f4;
+    background-image: none;
+    border-left: 0;
+}
+
+
+/* multiselect */
+
+.select2-container-multi .select2-choices {
+    background-color: #fff;
+      background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
+      background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+      background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+      background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+      background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+      background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+      border: 1px solid #aaa;
+      margin: 0;
+      padding: 0;
+      cursor: text;
+      overflow: hidden;
+      height: auto !important;
+      height: 1%;
+      position: relative;
+}
+
+.select2-container-multi .select2-choices {
+    min-height: 26px;
+}
+
+.select2-container-multi.select2-container-active .select2-choices {
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
+    -moz-box-shadow   : 0 0 5px rgba(0,0,0,.3);
+    -o-box-shadow     : 0 0 5px rgba(0,0,0,.3);
+    box-shadow        : 0 0 5px rgba(0,0,0,.3);
+    border: 1px solid #5897fb;
+    outline: none;
+}
+.select2-container-multi .select2-choices li {
+  float: left;
+  list-style: none;
+}
+.select2-container-multi .select2-choices .select2-search-field {
+  white-space: nowrap;
+  margin: 0;
+  padding: 0;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input {
+  color: #666;
+  background: transparent !important;
+  font-family: sans-serif;
+  font-size: 100%;
+  height: 15px;
+  padding: 5px;
+  margin: 1px 0;
+  outline: 0;
+  border: 0;
+  -webkit-box-shadow: none;
+  -moz-box-shadow   : none;
+  -o-box-shadow     : none;
+  box-shadow        : none;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input.select2-active {
+    background: #fff url('spinner.gif') no-repeat 100% !important;
+}
+
+.select2-default {
+  color: #999 !important;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice {
+  -webkit-border-radius: 3px;
+  -moz-border-radius   : 3px;
+  border-radius        : 3px;
+  -moz-background-clip   : padding;
+  -webkit-background-clip: padding-box;
+  background-clip        : padding-box;
+  background-color: #e4e4e4;
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
+  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+  background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+  background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+  background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+  -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+  -moz-box-shadow   : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+  box-shadow        : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+  color: #333;
+  border: 1px solid #aaaaaa;
+  line-height: 13px;
+  padding: 3px 5px 3px 18px;
+  margin: 3px 0 3px 5px;
+  position: relative;
+  cursor: default;
+}
+.select2-container-multi .select2-choices .select2-search-choice span {
+  cursor: default;
+}
+.select2-container-multi .select2-choices .select2-search-choice-focus {
+  background: #d4d4d4;
+}
+
+.select2-search-choice-close {
+  display: block;
+  position: absolute;
+  right: 3px;
+  top: 4px;
+  width: 12px;
+  height: 13px;
+  font-size: 1px;
+  background: url('select2.png') right top no-repeat;
+  outline: none;
+}
+
+.select2-container-multi .select2-search-choice-close {
+  left: 3px;
+}
+
+
+.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
+  background-position: right -11px;
+}
+.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
+  background-position: right -11px;
+}
+
+/* disabled styles */
+
+.select2-container-multi.select2-container-disabled .select2-choices{
+    background-color: #f4f4f4;
+    background-image: none;
+    border: 1px solid #ddd;
+    cursor: default;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
+    background-image: none;
+    background-color: #f4f4f4;
+    border: 1px solid #ddd;
+    padding: 3px 5px 3px 5px;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
+    display: none;
+}
+/* end multiselect */
+
+.select2-result-selectable .select2-match,
+.select2-result-unselectable .select2-result-selectable .select2-match { text-decoration: underline; }
+.select2-result-unselectable .select2-match { text-decoration: none; }
+
+.select2-offscreen { position: absolute; left: -10000px; }
diff --git a/select2-3.0/select2.js b/select2-3.0/select2.js
new file mode 100755
index 00000000..7877da2a
--- /dev/null
+++ b/select2-3.0/select2.js
@@ -0,0 +1,2195 @@
+/*
+ Copyright 2012 Igor Vaynberg
+
+ Version: 3.0 Timestamp: Tue Jul 31 21:09:16 PDT 2012
+
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in
+ compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software distributed under the License is
+ distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and limitations under the License.
+ */
+ (function ($) {
+ 	if(typeof $.fn.each2 == "undefined"){
+ 		$.fn.extend({
+ 			/*
+			* 4-10 times faster .each replacement
+			* use it carefully, as it overrides jQuery context of element on each iteration
+			*/
+			each2 : function (c) {
+				var j = $([0]), i = -1, l = this.length;
+				while (
+					++i < l
+					&& (j.context = j[0] = this[i])
+					&& c.call(j[0], i, j) !== false //"this"=DOM, i=index, j=jQuery object
+				);
+				return this;
+			}
+ 		});
+ 	}
+})(jQuery);
+
+(function ($, undefined) {
+    "use strict";
+    /*global document, window, jQuery, console */
+
+    if (window.Select2 !== undefined) {
+        return;
+    }
+
+    var KEY, AbstractSelect2, SingleSelect2, MultiSelect2, nextUid, sizer;
+
+    KEY = {
+        TAB: 9,
+        ENTER: 13,
+        ESC: 27,
+        SPACE: 32,
+        LEFT: 37,
+        UP: 38,
+        RIGHT: 39,
+        DOWN: 40,
+        SHIFT: 16,
+        CTRL: 17,
+        ALT: 18,
+        PAGE_UP: 33,
+        PAGE_DOWN: 34,
+        HOME: 36,
+        END: 35,
+        BACKSPACE: 8,
+        DELETE: 46,
+        isArrow: function (k) {
+            k = k.which ? k.which : k;
+            switch (k) {
+            case KEY.LEFT:
+            case KEY.RIGHT:
+            case KEY.UP:
+            case KEY.DOWN:
+                return true;
+            }
+            return false;
+        },
+        isControl: function (k) {
+            k = k.which ? k.which : k;
+            switch (k) {
+            case KEY.SHIFT:
+            case KEY.CTRL:
+            case KEY.ALT:
+                return true;
+            }
+
+            if (k.metaKey) return true;
+
+            return false;
+        },
+        isFunctionKey: function (k) {
+            k = k.which ? k.which : k;
+            return k >= 112 && k <= 123;
+        }
+    };
+
+    nextUid=(function() { var counter=1; return function() { return counter++; }; }());
+
+    function escapeMarkup(markup) {
+        if (markup && typeof(markup) === "string") {
+            return markup.replace("&", "&");
+        } else {
+            return markup;
+        }
+    }
+
+    function indexOf(value, array) {
+        var i = 0, l = array.length, v;
+
+        if (typeof value === "undefined") {
+          return -1;
+        }
+
+        if (value.constructor === String) {
+            for (; i < l; i = i + 1) if (value.localeCompare(array[i]) === 0) return i;
+        } else {
+            for (; i < l; i = i + 1) {
+                v = array[i];
+                if (v.constructor === String) {
+                    if (v.localeCompare(value) === 0) return i;
+                } else {
+                    if (v === value) return i;
+                }
+            }
+        }
+        return -1;
+    }
+
+    /**
+     * Compares equality of a and b taking into account that a and b may be strings, in which case localeCompare is used
+     * @param a
+     * @param b
+     */
+    function equal(a, b) {
+        if (a === b) return true;
+        if (a === undefined || b === undefined) return false;
+        if (a === null || b === null) return false;
+        if (a.constructor === String) return a.localeCompare(b) === 0;
+        if (b.constructor === String) return b.localeCompare(a) === 0;
+        return false;
+    }
+
+    /**
+     * Splits the string into an array of values, trimming each value. An empty array is returned for nulls or empty
+     * strings
+     * @param string
+     * @param separator
+     */
+    function splitVal(string, separator) {
+        var val, i, l;
+        if (string === null || string.length < 1) return [];
+        val = string.split(separator);
+        for (i = 0, l = val.length; i < l; i = i + 1) val[i] = $.trim(val[i]);
+        return val;
+    }
+
+    function getSideBorderPadding(element) {
+        return element.outerWidth() - element.width();
+    }
+
+    function installKeyUpChangeEvent(element) {
+        var key="keyup-change-value";
+        element.bind("keydown", function () {
+            if ($.data(element, key) === undefined) {
+                $.data(element, key, element.val());
+            }
+        });
+        element.bind("keyup", function () {
+            var val= $.data(element, key);
+            if (val !== undefined && element.val() !== val) {
+                $.removeData(element, key);
+                element.trigger("keyup-change");
+            }
+        });
+    }
+
+    $(document).delegate("*", "mousemove", function (e) {
+        $.data(document, "select2-lastpos", {x: e.pageX, y: e.pageY});
+    });
+
+    /**
+     * filters mouse events so an event is fired only if the mouse moved.
+     *
+     * filters out mouse events that occur when mouse is stationary but
+     * the elements under the pointer are scrolled.
+     */
+    function installFilteredMouseMove(element) {
+	    element.bind("mousemove", function (e) {
+            var lastpos = $.data(document, "select2-lastpos");
+            if (lastpos === undefined || lastpos.x !== e.pageX || lastpos.y !== e.pageY) {
+                $(e.target).trigger("mousemove-filtered", e);
+            }
+        });
+    }
+
+    /**
+     * Debounces a function. Returns a function that calls the original fn function only if no invocations have been made
+     * within the last quietMillis milliseconds.
+     *
+     * @param quietMillis number of milliseconds to wait before invoking fn
+     * @param fn function to be debounced
+     * @return debounced version of fn
+     */
+    function debounce(quietMillis, fn) {
+        var timeout;
+        return function () {
+            window.clearTimeout(timeout);
+            timeout = window.setTimeout(fn, quietMillis);
+        };
+    }
+
+    /**
+     * A simple implementation of a thunk
+     * @param formula function used to lazily initialize the thunk
+     * @return {Function}
+     */
+    function thunk(formula) {
+        var evaluated = false,
+            value;
+        return function() {
+            if (evaluated === false) { value = formula(); evaluated = true; }
+            return value;
+        };
+    };
+
+    function installDebouncedScroll(threshold, element) {
+        var notify = debounce(threshold, function (e) { element.trigger("scroll-debounced", e);});
+        element.bind("scroll", function (e) {
+            if (indexOf(e.target, element.get()) >= 0) notify(e);
+        });
+    }
+
+    function killEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    function measureTextWidth(e) {
+        if (!sizer){
+        	var style = e[0].currentStyle || window.getComputedStyle(e[0], null);
+        	sizer = $("
    ").css({
+	            position: "absolute",
+	            left: "-10000px",
+	            top: "-10000px",
+	            display: "none",
+	            fontSize: style.fontSize,
+	            fontFamily: style.fontFamily,
+	            fontStyle: style.fontStyle,
+	            fontWeight: style.fontWeight,
+	            letterSpacing: style.letterSpacing,
+	            textTransform: style.textTransform,
+	            whiteSpace: "nowrap"
+	        });
+        	$("body").append(sizer);
+        }
+        sizer.text(e.val());
+        return sizer.width();
+    }
+
+    function markMatch(text, term, markup) {
+        var match=text.toUpperCase().indexOf(term.toUpperCase()),
+            tl=term.length;
+
+        if (match<0) {
+            markup.push(text);
+            return;
+        }
+
+        markup.push(text.substring(0, match));
+        markup.push("");
+        markup.push(text.substring(match, match + tl));
+        markup.push("");
+        markup.push(text.substring(match + tl, text.length));
+    }
+
+    /**
+     * Produces an ajax-based query function
+     *
+     * @param options object containing configuration paramters
+     * @param options.transport function that will be used to execute the ajax request. must be compatible with parameters supported by $.ajax
+     * @param options.url url for the data
+     * @param options.data a function(searchTerm, pageNumber, context) that should return an object containing query string parameters for the above url.
+     * @param options.dataType request data type: ajax, jsonp, other datatatypes supported by jQuery's $.ajax function or the transport function if specified
+     * @param options.quietMillis (optional) milliseconds to wait before making the ajaxRequest, helps debounce the ajax function if invoked too often
+     * @param options.results a function(remoteData, pageNumber) that converts data returned form the remote request to the format expected by Select2.
+     *      The expected format is an object containing the following keys:
+     *      results array of objects that will be used as choices
+     *      more (optional) boolean indicating whether there are more results available
+     *      Example: {results:[{id:1, text:'Red'},{id:2, text:'Blue'}], more:true}
+     */
+    function ajax(options) {
+        var timeout, // current scheduled but not yet executed request
+            requestSequence = 0, // sequence used to drop out-of-order responses
+            handler = null,
+            quietMillis = options.quietMillis || 100;
+
+        return function (query) {
+            window.clearTimeout(timeout);
+            timeout = window.setTimeout(function () {
+                requestSequence += 1; // increment the sequence
+                var requestNumber = requestSequence, // this request's sequence number
+                    data = options.data, // ajax data function
+                    transport = options.transport || $.ajax,
+                    type = options.type || 'GET'; // set type of request (GET or POST)
+
+                data = data.call(this, query.term, query.page, query.context);
+
+                if( null !== handler) { handler.abort(); }
+
+                handler = transport.call(null, {
+                    url: options.url,
+                    dataType: options.dataType,
+                    data: data,
+                    type: type,
+                    success: function (data) {
+                        if (requestNumber < requestSequence) {
+                            return;
+                        }
+                        // TODO 3.0 - replace query.page with query so users have access to term, page, etc.
+                        var results = options.results(data, query.page);
+                        query.callback(results);
+                    }
+                });
+            }, quietMillis);
+        };
+    }
+
+    /**
+     * Produces a query function that works with a local array
+     *
+     * @param options object containing configuration parameters. The options parameter can either be an array or an
+     * object.
+     *
+     * If the array form is used it is assumed that it contains objects with 'id' and 'text' keys.
+     *
+     * If the object form is used ti is assumed that it contains 'data' and 'text' keys. The 'data' key should contain
+     * an array of objects that will be used as choices. These objects must contain at least an 'id' key. The 'text'
+     * key can either be a String in which case it is expected that each element in the 'data' array has a key with the
+     * value of 'text' which will be used to match choices. Alternatively, text can be a function(item) that can extract
+     * the text.
+     */
+    function local(options) {
+        var data = options, // data elements
+            dataText,
+            text = function (item) { return ""+item.text; }; // function used to retrieve the text portion of a data item that is matched against the search
+
+        if (!$.isArray(data)) {
+            text = data.text;
+            // if text is not a function we assume it to be a key name
+            if (!$.isFunction(text)) {
+              dataText = data.text; // we need to store this in a separate variable because in the next step data gets reset and data.text is no longer available
+              text = function (item) { return item[dataText]; };
+            }
+            data = data.results;
+        }
+
+        return function (query) {
+            var t = query.term, filtered = {};
+            if (t === "") {
+                query.callback({results: data});
+                return;
+            }
+            filtered.results = $(data)
+                .filter(function () {return query.matcher(t, text(this));})
+                .get();
+            query.callback(filtered);
+        };
+    }
+
+    // TODO javadoc
+    function tags(data) {
+        // TODO even for a function we should probably return a wrapper that does the same object/string check as
+        // the function for arrays. otherwise only functions that return objects are supported.
+        if ($.isFunction(data)) {
+            return data;
+        }
+
+        // if not a function we assume it to be an array
+
+        return function (query) {
+            var t = query.term, filtered = {results: []};
+            $(data).each(function () {
+                var isObject = this.text !== undefined,
+                    text = isObject ? this.text : this;
+                if (t === "" || query.matcher(t, text)) {
+                    filtered.results.push(isObject ? this : {id: this, text: this});
+                }
+            });
+            query.callback(filtered);
+        };
+    }
+
+    /**
+     * Checks if the formatter function should be used.
+     *
+     * Throws an error if it is not a function. Returns true if it should be used,
+     * false if no formatting should be performed.
+     *
+     * @param formatter
+     */
+    function checkFormatter(formatter, formatterName) {
+        if ($.isFunction(formatter)) return true;
+        if (!formatter) return fasle;
+        throw new Error("formatterName must be a function or a falsy value");
+    }
+
+    /**
+     * blurs any Select2 container that has focus when an element outside them was clicked or received focus
+     *
+     * also takes care of clicks on label tags that point to the source element
+     */
+    $(document).ready(function () {
+        $(document).delegate("*", "mousedown touchend", function (e) {
+            var target = $(e.target).closest("div.select2-container").get(0), attr;
+            if (target) {
+                $(document).find("div.select2-container-active").each(function () {
+                    if (this !== target) $(this).data("select2").blur();
+                });
+            } else {
+                target = $(e.target).closest("div.select2-drop").get(0);
+                $(document).find("div.select2-drop-active").each(function () {
+                    if (this !== target) $(this).data("select2").blur();
+                });
+            }
+
+            target=$(e.target);
+            attr = target.attr("for");
+            if ("LABEL" === e.target.tagName && attr && attr.length > 0) {
+                target = $("#"+attr);
+                target = target.data("select2");
+                if (target !== undefined) { target.focus(); e.preventDefault();}
+            }
+        });
+    });
+
+    function evaluate(val) {
+        return $.isFunction(val) ? val() : val;
+    }
+
+    /**
+     * Creates a new class
+     *
+     * @param superClass
+     * @param methods
+     */
+    function clazz(SuperClass, methods) {
+        var constructor = function () {};
+        constructor.prototype = new SuperClass;
+        constructor.prototype.constructor = constructor;
+        constructor.prototype.parent = SuperClass.prototype;
+        constructor.prototype = $.extend(constructor.prototype, methods);
+        return constructor;
+    }
+
+    AbstractSelect2 = clazz(Object, {
+
+        // abstract
+        bind: function (func) {
+            var self = this;
+            return function () {
+                func.apply(self, arguments);
+            };
+        },
+
+        // abstract
+        init: function (opts) {
+            var results, search, resultsSelector = ".select2-results";
+
+            // prepare options
+            this.opts = opts = this.prepareOpts(opts);
+
+            this.id=opts.id;
+
+            // destroy if called on an existing component
+            if (opts.element.data("select2") !== undefined &&
+                opts.element.data("select2") !== null) {
+                this.destroy();
+            }
+
+            this.enabled=true;
+            this.container = this.createContainer();
+
+            // cache the body so future lookups are cheap
+            this.body = thunk(function() { return opts.element.closest("body"); });
+
+            if (opts.element.attr("class") !== undefined) {
+                this.container.addClass(opts.element.attr("class"));
+            }
+
+            this.container.css(evaluate(opts.containerCss));
+            this.container.addClass(evaluate(opts.containerCssClass));
+
+            // swap container for the element
+            this.opts.element
+                .data("select2", this)
+                .hide()
+                .after(this.container);
+            this.container.data("select2", this);
+
+            this.dropdown = this.container.find(".select2-drop");
+            this.dropdown.css(evaluate(opts.dropdownCss));
+            this.dropdown.addClass(evaluate(opts.dropdownCssClass));
+            this.dropdown.data("select2", this);
+
+            this.results = results = this.container.find(resultsSelector);
+            this.search = search = this.container.find("input.select2-input");
+
+            search.attr("tabIndex", this.opts.element.attr("tabIndex"));
+
+            this.resultsPage = 0;
+            this.context = null;
+
+            // initialize the container
+            this.initContainer();
+            this.initContainerWidth();
+
+            installFilteredMouseMove(this.results);
+            this.dropdown.delegate(resultsSelector, "mousemove-filtered", this.bind(this.highlightUnderEvent));
+
+            installDebouncedScroll(80, this.results);
+            this.dropdown.delegate(resultsSelector, "scroll-debounced", this.bind(this.loadMoreIfNeeded));
+
+            // if jquery.mousewheel plugin is installed we can prevent out-of-bounds scrolling of results via mousewheel
+            if ($.fn.mousewheel) {
+                results.mousewheel(function (e, delta, deltaX, deltaY) {
+                    var top = results.scrollTop(), height;
+                    if (deltaY > 0 && top - deltaY <= 0) {
+                        results.scrollTop(0);
+                        killEvent(e);
+                    } else if (deltaY < 0 && results.get(0).scrollHeight - results.scrollTop() + deltaY <= results.height()) {
+                        results.scrollTop(results.get(0).scrollHeight - results.height());
+                        killEvent(e);
+                    }
+                });
+            }
+
+            installKeyUpChangeEvent(search);
+            search.bind("keyup-change", this.bind(this.updateResults));
+            search.bind("focus", function () { search.addClass("select2-focused"); if (search.val() === " ") search.val(""); });
+            search.bind("blur", function () { search.removeClass("select2-focused");});
+
+            this.dropdown.delegate(resultsSelector, "mouseup", this.bind(function (e) {
+                if ($(e.target).closest(".select2-result-selectable:not(.select2-disabled)").length > 0) {
+                    this.highlightUnderEvent(e);
+                    this.selectHighlighted(e);
+                } else {
+                    this.focusSearch();
+                }
+                killEvent(e);
+            }));
+
+            // trap all mouse events from leaving the dropdown. sometimes there may be a modal that is listening
+            // for mouse events outside of itself so it can close itself. since the dropdown is now outside the select2's
+            // dom it will trigger the popup close, which is not what we want
+            this.dropdown.bind("click mouseup mousedown", function (e) { e.stopPropagation(); });
+
+            if ($.isFunction(this.opts.initSelection)) {
+                // initialize selection based on the current value of the source element
+                this.initSelection();
+
+                // if the user has provided a function that can set selection based on the value of the source element
+                // we monitor the change event on the element and trigger it, allowing for two way synchronization
+                this.monitorSource();
+            }
+
+            if (opts.element.is(":disabled")) this.disable();
+        },
+
+        // abstract
+        destroy: function () {
+            var select2 = this.opts.element.data("select2");
+            if (select2 !== undefined) {
+                select2.container.remove();
+                select2.dropdown.remove();
+                select2.opts.element
+                    .removeData("select2")
+                    .unbind(".select2")
+                    .show();
+            }
+        },
+
+        // abstract
+        prepareOpts: function (opts) {
+            var element, select, idKey, ajaxUrl;
+
+            element = opts.element;
+
+            if (element.get(0).tagName.toLowerCase() === "select") {
+                this.select = select = opts.element;
+            }
+
+            //Custom tags separator.
+            opts.separator = opts.separator || ",";
+
+            if (select) {
+                // these options are not allowed when attached to a select because they are picked up off the element itself
+                $.each(["id", "multiple", "ajax", "query", "createSearchChoice", "initSelection", "data", "tags"], function () {
+                    if (this in opts) {
+                        throw new Error("Option '" + this + "' is not allowed for Select2 when attached to a " ,
+                "   
    " ,
+                "   
      " ,
+                "   
    " ,
+                ""].join(""));
+            return container;
+        },
+
+        // single
+        opening: function () {
+            this.search.show();
+            this.parent.opening.apply(this, arguments);
+            this.dropdown.removeClass("select2-offscreen");
+        },
+
+        // single
+        close: function () {
+            if (!this.opened()) return;
+            this.parent.close.apply(this, arguments);
+            this.dropdown.removeAttr("style").addClass("select2-offscreen").insertAfter(this.selection).show();
+        },
+
+        // single
+        focus: function () {
+            this.close();
+            this.selection.focus();
+        },
+
+        // single
+        isFocused: function () {
+            return this.selection[0] === document.activeElement;
+        },
+
+        // single
+        cancel: function () {
+            this.parent.cancel.apply(this, arguments);
+            this.selection.focus();
+        },
+
+        // single
+        initContainer: function () {
+
+            var selection,
+                container = this.container,
+                dropdown = this.dropdown,
+                clickingInside = false;
+
+            this.selection = selection = container.find(".select2-choice");
+
+            this.search.bind("keydown", this.bind(function (e) {
+                if (!this.enabled) return;
+
+                if (e.which === KEY.PAGE_UP || e.which === KEY.PAGE_DOWN) {
+                    // prevent the page from scrolling
+                    killEvent(e);
+                    return;
+                }
+
+                if (this.opened()) {
+                    switch (e.which) {
+                        case KEY.UP:
+                        case KEY.DOWN:
+                            this.moveHighlight((e.which === KEY.UP) ? -1 : 1);
+                            killEvent(e);
+                            return;
+                        case KEY.TAB:
+                        case KEY.ENTER:
+                            this.selectHighlighted();
+                            killEvent(e);
+                            return;
+                        case KEY.ESC:
+                            this.cancel(e);
+                            killEvent(e);
+                            return;
+                    }
+                } else {
+
+                    if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) {
+                        return;
+                    }
+
+                    this.open();
+
+                    if (e.which === KEY.ENTER) {
+                        // do not propagate the event otherwise we open, and propagate enter which closes
+                        return;
+                    }
+                }
+            }));
+
+            this.search.bind("focus", this.bind(function() {
+                this.selection.attr("tabIndex", "-1");
+            }));
+            this.search.bind("blur", this.bind(function() {
+                if (!this.opened()) this.container.removeClass("select2-container-active");
+                window.setTimeout(this.bind(function() { this.selection.attr("tabIndex", this.opts.element.attr("tabIndex")); }), 10);
+            }));
+
+            selection.bind("mousedown", this.bind(function (e) {
+                clickingInside = true;
+
+                if (this.opened()) {
+                    this.close();
+                    this.selection.focus();
+                } else if (this.enabled) {
+                    this.open();
+                }
+                killEvent(e);
+
+                clickingInside = false;
+            }));
+
+            dropdown.bind("mousedown", this.bind(function() { this.search.focus(); }));
+
+            selection.bind("focus", this.bind(function() {
+                this.container.addClass("select2-container-active");
+                // hide the search so the tab key does not focus on it
+                this.search.attr("tabIndex", "-1");
+            }));
+
+            selection.bind("blur", this.bind(function() {
+                this.container.removeClass("select2-container-active");
+                window.setTimeout(this.bind(function() { this.search.attr("tabIndex", this.opts.element.attr("tabIndex")); }), 10);
+            }));
+
+            selection.bind("keydown", this.bind(function(e) {
+                if (!this.enabled) return;
+
+                if (e.which === KEY.PAGE_UP || e.which === KEY.PAGE_DOWN) {
+                    // prevent the page from scrolling
+                    killEvent(e);
+                    return;
+                }
+
+                if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) {
+                    return;
+                }
+
+                this.open();
+
+                if (e.which === KEY.ENTER) {
+                    // do not propagate the event otherwise we open, and propagate enter which closes
+                    killEvent(e);
+                    return;
+                }
+
+                // do not set the search input value for non-alpha-numeric keys
+                // otherwise pressing down results in a '(' being set in the search field
+                if (e.which < 48 ) { // '0' == 48
+                    killEvent(e);
+                    return;
+                }
+
+                var keyWritten = String.fromCharCode(e.which).toLowerCase();
+
+                if (e.shiftKey) {
+                    keyWritten = keyWritten.toUpperCase();
+                }
+
+                this.search.val(keyWritten);
+
+                // prevent event propagation so it doesnt replay on the now focussed search field and result in double key entry
+                killEvent(e);
+            }));
+
+            selection.delegate("abbr", "mousedown", this.bind(function (e) {
+                if (!this.enabled) return;
+                this.clear();
+                killEvent(e);
+                this.close();
+                this.triggerChange();
+                this.selection.focus();
+            }));
+
+            this.setPlaceholder();
+
+            this.search.bind("focus", this.bind(function() {
+                this.container.addClass("select2-container-active");
+            }));
+        },
+
+        // single
+        clear: function() {
+            this.opts.element.val("");
+            this.selection.find("span").empty();
+            this.selection.removeData("select2-data");
+            this.setPlaceholder();
+        },
+
+        /**
+         * Sets selection based on source element's value
+         */
+        // single
+        initSelection: function () {
+            var selected;
+            if (this.opts.element.val() === "") {
+                this.close();
+                this.setPlaceholder();
+            } else {
+                var self = this;
+                this.opts.initSelection.call(null, this.opts.element, function(selected){
+                    if (selected !== undefined && selected !== null) {
+                        self.updateSelection(selected);
+                        self.close();
+                        self.setPlaceholder();
+                    }
+                });
+            }
+        },
+
+        // single
+        prepareOpts: function () {
+            var opts = this.parent.prepareOpts.apply(this, arguments);
+
+            if (opts.element.get(0).tagName.toLowerCase() === "select") {
+                // install the selection initializer
+                opts.initSelection = function (element, callback) {
+                    var selected = element.find(":selected");
+                    // a single select box always has a value, no need to null check 'selected'
+                    if ($.isFunction(callback))
+                        callback({id: selected.attr("value"), text: selected.text()});
+                };
+            }
+
+            return opts;
+        },
+
+        // single
+        setPlaceholder: function () {
+            var placeholder = this.getPlaceholder();
+
+            if (this.opts.element.val() === "" && placeholder !== undefined) {
+
+                // check for a first blank option if attached to a select
+                if (this.select && this.select.find("option:first").text() !== "") return;
+
+                this.selection.find("span").html(escapeMarkup(placeholder));
+
+                this.selection.addClass("select2-default");
+
+                this.selection.find("abbr").hide();
+            }
+        },
+
+        // single
+        postprocessResults: function (data, initial) {
+            var selected = 0, self = this, showSearchInput = true;
+
+            // find the selected element in the result list
+
+            this.results.find(".select2-result-selectable").each2(function (i, elm) {
+                if (equal(self.id(elm.data("select2-data")), self.opts.element.val())) {
+                    selected = i;
+                    return false;
+                }
+            });
+
+            // and highlight it
+
+            this.highlight(selected);
+
+            // hide the search box if this is the first we got the results and there are a few of them
+
+            if (initial === true) {
+                // TODO below we use data.results.length, but what we really need is something recursive to calc the length
+                // TODO in case there are optgroups
+                showSearchInput = this.showSearchInput = data.results.length >= this.opts.minimumResultsForSearch;
+                this.dropdown.find(".select2-search")[showSearchInput ? "removeClass" : "addClass"]("select2-search-hidden");
+
+                //add "select2-with-searchbox" to the container if search box is shown
+                $(this.dropdown, this.container)[showSearchInput ? "addClass" : "removeClass"]("select2-with-searchbox");
+            }
+
+        },
+
+        // single
+        onSelect: function (data) {
+            var old = this.opts.element.val();
+
+            this.opts.element.val(this.id(data));
+            this.updateSelection(data);
+            this.close();
+            this.selection.focus();
+
+            if (!equal(old, this.id(data))) { this.triggerChange(); }
+        },
+
+        // single
+        updateSelection: function (data) {
+
+            var container=this.selection.find("span"), formatted;
+
+            this.selection.data("select2-data", data);
+
+            container.empty();
+            formatted=this.opts.formatSelection(data, container);
+            if (formatted !== undefined) {
+                container.append(escapeMarkup(formatted));
+            }
+
+            this.selection.removeClass("select2-default");
+
+            if (this.opts.allowClear && this.getPlaceholder() !== undefined) {
+                this.selection.find("abbr").show();
+            }
+        },
+
+        // single
+        val: function () {
+            var val, data = null, self = this;
+
+            if (arguments.length === 0) {
+                return this.opts.element.val();
+            }
+
+            val = arguments[0];
+
+            if (this.select) {
+                this.select
+                    .val(val)
+                    .find(":selected").each2(function (i, elm) {
+                        data = {id: elm.attr("value"), text: elm.text()};
+                        return false;
+                    });
+                this.updateSelection(data);
+                this.setPlaceholder();
+            } else {
+                if (this.opts.initSelection === undefined) {
+                    throw new Error("cannot call val() if initSelection() is not defined");
+                }
+                // val is an id. !val is true for [undefined,null,'']
+                if (!val) {
+                    this.clear();
+                    return;
+                }
+                this.opts.initSelection(this.opts.element, function(data){
+                    self.opts.element.val(!data ? "" : self.id(data));
+                    self.updateSelection(data);
+                    self.setPlaceholder();
+                });
+            }
+        },
+
+        // single
+        clearSearch: function () {
+            this.search.val("");
+        },
+
+        // single
+        data: function(value) {
+            var data;
+
+            if (arguments.length === 0) {
+                data = this.selection.data("select2-data");
+                if (data == undefined) data = null;
+                return data;
+            } else {
+                if (!value || value === "") {
+                    this.clear();
+                } else {
+                    this.opts.element.val(!value ? "" : this.id(value));
+                    this.updateSelection(value);
+                }
+            }
+        }
+    });
+
+    MultiSelect2 = clazz(AbstractSelect2, {
+
+        // multi
+        createContainer: function () {
+            var container = $("
    ", {
+                "class": "select2-container select2-container-multi"
+            }).html([
+                "    
      ",
+                //"
    • California
      • " ,
+                "  
    • " ,
+                "    " ,
+                "  
      • " ,
+                "
    " ,
+                ""].join(""));
+			return container;
+        },
+
+        // multi
+        prepareOpts: function () {
+            var opts = this.parent.prepareOpts.apply(this, arguments);
+
+            // TODO validate placeholder is a string if specified
+
+            if (opts.element.get(0).tagName.toLowerCase() === "select") {
+                // install sthe selection initializer
+                opts.initSelection = function (element,callback) {
+
+                    var data = [];
+                    element.find(":selected").each2(function (i, elm) {
+                        data.push({id: elm.attr("value"), text: elm.text()});
+                    });
+
+                    if ($.isFunction(callback))
+                        callback(data);
+                };
+            }
+
+            return opts;
+        },
+
+        // multi
+        initContainer: function () {
+
+            var selector = ".select2-choices", selection;
+
+            this.searchContainer = this.container.find(".select2-search-field");
+            this.selection = selection = this.container.find(selector);
+
+            this.search.bind("keydown", this.bind(function (e) {
+                if (!this.enabled) return;
+
+                if (e.which === KEY.BACKSPACE && this.search.val() === "") {
+                    this.close();
+
+                    var choices,
+                        selected = selection.find(".select2-search-choice-focus");
+                    if (selected.length > 0) {
+                        this.unselect(selected.first());
+                        this.search.width(10);
+                        killEvent(e);
+                        return;
+                    }
+
+                    choices = selection.find(".select2-search-choice");
+                    if (choices.length > 0) {
+                        choices.last().addClass("select2-search-choice-focus");
+                    }
+                } else {
+                    selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");
+                }
+
+                if (this.opened()) {
+                    switch (e.which) {
+                    case KEY.UP:
+                    case KEY.DOWN:
+                        this.moveHighlight((e.which === KEY.UP) ? -1 : 1);
+                        killEvent(e);
+                        return;
+                    case KEY.ENTER:
+                    case KEY.TAB:
+                        this.selectHighlighted();
+                        killEvent(e);
+                        return;
+                    case KEY.ESC:
+                        this.cancel(e);
+                        killEvent(e);
+                        return;
+                    }
+                }
+
+                if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.BACKSPACE || e.which === KEY.ESC) {
+                    return;
+                }
+
+                this.open();
+
+                if (e.which === KEY.PAGE_UP || e.which === KEY.PAGE_DOWN) {
+                    // prevent the page from scrolling
+                    killEvent(e);
+                }
+            }));
+
+            this.search.bind("keyup", this.bind(this.resizeSearch));
+
+            this.search.bind("blur", this.bind(function() {
+                this.container.removeClass("select2-container-active");
+            }));
+
+            this.container.delegate(selector, "mousedown", this.bind(function (e) {
+                if (!this.enabled) return;
+                this.clearPlaceholder();
+                this.open();
+                this.focusSearch();
+                e.preventDefault();
+            }));
+
+            this.container.delegate(selector, "focus", this.bind(function () {
+                if (!this.enabled) return;
+                this.container.addClass("select2-container-active");
+                this.dropdown.addClass("select2-drop-active");
+                this.clearPlaceholder();
+            }));
+
+            // set the placeholder if necessary
+            this.clearSearch();
+        },
+
+        // multi
+        enable: function() {
+            if (this.enabled) return;
+
+            this.parent.enable.apply(this, arguments);
+
+            this.search.removeAttr("disabled");
+        },
+
+        // multi
+        disable: function() {
+            if (!this.enabled) return;
+
+            this.parent.disable.apply(this, arguments);
+
+            this.search.attr("disabled", true);
+        },
+
+        // multi
+        initSelection: function () {
+            var data;
+            if (this.opts.element.val() === "") {
+                this.updateSelection([]);
+                this.close();
+                // set the placeholder if necessary
+                this.clearSearch();
+            }
+            if (this.select || this.opts.element.val() !== "") {
+                var self = this;
+                this.opts.initSelection.call(null, this.opts.element, function(data){
+                    if (data !== undefined && data !== null) {
+                        self.updateSelection(data);
+                        self.close();
+                        // set the placeholder if necessary
+                        self.clearSearch();
+                    }
+                });
+            }
+        },
+
+        // multi
+        clearSearch: function () {
+            var placeholder = this.getPlaceholder();
+
+            if (placeholder !== undefined  && this.getVal().length === 0 && this.search.hasClass("select2-focused") === false) {
+                this.search.val(placeholder).addClass("select2-default");
+                // stretch the search box to full width of the container so as much of the placeholder is visible as possible
+                this.resizeSearch();
+            } else {
+                // we set this to " " instead of "" and later clear it on focus() because there is a firefox bug
+                // that does not properly render the caret when the field starts out blank
+                this.search.val(" ").width(10);
+            }
+        },
+
+        // multi
+        clearPlaceholder: function () {
+            if (this.search.hasClass("select2-default")) {
+                this.search.val("").removeClass("select2-default");
+            } else {
+                // work around for the space character we set to avoid firefox caret bug
+                if (this.search.val() === " ") this.search.val("");
+            }
+        },
+
+        // multi
+        opening: function () {
+            this.parent.opening.apply(this, arguments);
+
+            this.clearPlaceholder();
+			this.resizeSearch();
+            this.focusSearch();
+        },
+
+        // multi
+        close: function () {
+            if (!this.opened()) return;
+            this.parent.close.apply(this, arguments);
+        },
+
+        // multi
+        focus: function () {
+            this.close();
+            this.search.focus();
+        },
+
+        // multi
+        isFocused: function () {
+            return this.search.hasClass("select2-focused");
+        },
+
+        // multi
+        updateSelection: function (data) {
+            var ids = [], filtered = [], self = this;
+
+            // filter out duplicates
+            $(data).each(function () {
+                if (indexOf(self.id(this), ids) < 0) {
+                    ids.push(self.id(this));
+                    filtered.push(this);
+                }
+            });
+            data = filtered;
+
+            this.selection.find(".select2-search-choice").remove();
+            $(data).each(function () {
+                self.addSelectedChoice(this);
+            });
+            self.postprocessResults();
+        },
+
+        // multi
+        onSelect: function (data) {
+            this.addSelectedChoice(data);
+            if (this.select) { this.postprocessResults(); }
+
+            if (this.opts.closeOnSelect) {
+                this.close();
+                this.search.width(10);
+            } else {
+                this.search.width(10);
+                this.resizeSearch();
+
+                if (this.countSelectableResults()>0) {
+                    this.positionDropdown();
+                } else {
+                    // if nothing left to select close
+                    this.close();
+                }
+            }
+
+            // since its not possible to select an element that has already been
+            // added we do not need to check if this is a new element before firing change
+            this.triggerChange({ added: data });
+
+            this.focusSearch();
+        },
+
+        // multi
+        cancel: function () {
+            this.close();
+            this.focusSearch();
+        },
+
+        // multi
+        addSelectedChoice: function (data) {
+            var choice=$(
+                    "
  • " +
+                    "    
    " +
+                    "    " +
+                    "
    • "),
+                id = this.id(data),
+                val = this.getVal(),
+                formatted;
+
+            formatted=this.opts.formatSelection(data, choice);
+            choice.find("div").replaceWith("
    "+escapeMarkup(formatted)+"
    ");
+            choice.find(".select2-search-choice-close")
+                .bind("click dblclick", this.bind(function (e) {
+                if (!this.enabled) return;
+
+                $(e.target).closest(".select2-search-choice").fadeOut('fast').animate({width: "hide"}, 50, this.bind(function(){
+                    this.unselect($(e.target));
+                    this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");
+                    this.close();
+                    this.focusSearch();
+                })).dequeue();
+                killEvent(e);
+            })).bind("focus", this.bind(function () {
+                if (!this.enabled) return;
+                this.container.addClass("select2-container-active");
+                this.dropdown.addClass("select2-drop-active");
+            }));
+
+            choice.data("select2-data", data);
+            choice.insertBefore(this.searchContainer);
+
+            val.push(id);
+            this.setVal(val);
+        },
+
+        // multi
+        unselect: function (selected) {
+            var val = this.getVal(),
+                data,
+                index;
+
+            selected = selected.closest(".select2-search-choice");
+
+            if (selected.length === 0) {
+                throw "Invalid argument: " + selected + ". Must be .select2-search-choice";
+            }
+
+            data = selected.data("select2-data");
+
+            index = indexOf(this.id(data), val);
+
+            if (index >= 0) {
+                val.splice(index, 1);
+                this.setVal(val);
+                if (this.select) this.postprocessResults();
+            }
+            selected.remove();
+            this.triggerChange({ removed: data });
+        },
+
+        // multi
+        postprocessResults: function () {
+            var val = this.getVal(),
+                choices = this.results.find(".select2-result-selectable"),
+                compound = this.results.find(".select2-result-with-children"),
+                self = this;
+
+            choices.each2(function (i, choice) {
+                var id = self.id(choice.data("select2-data"));
+                if (indexOf(id, val) >= 0) {
+                    choice.addClass("select2-disabled").removeClass("select2-result-selectable");
+                } else {
+                    choice.removeClass("select2-disabled").addClass("select2-result-selectable");
+                }
+            });
+
+            compound.each2(function(i, e) {
+                if (e.find(".select2-result-selectable").length==0) {
+                    e.addClass("select2-disabled");
+                } else {
+                    e.removeClass("select2-disabled");
+                }
+            });
+
+            choices.each2(function (i, choice) {
+                if (!choice.hasClass("select2-disabled") && choice.hasClass("select2-result-selectable")) {
+                    self.highlight(0);
+                    return false;
+                }
+            });
+
+        },
+
+        // multi
+        resizeSearch: function () {
+
+            var minimumWidth, left, maxWidth, containerLeft, searchWidth,
+            	sideBorderPadding = getSideBorderPadding(this.search);
+
+            minimumWidth = measureTextWidth(this.search) + 10;
+
+            left = this.search.offset().left;
+
+            maxWidth = this.selection.width();
+            containerLeft = this.selection.offset().left;
+
+            searchWidth = maxWidth - (left - containerLeft) - sideBorderPadding;
+
+            if (searchWidth < minimumWidth) {
+                searchWidth = maxWidth - sideBorderPadding;
+            }
+
+            if (searchWidth < 40) {
+                searchWidth = maxWidth - sideBorderPadding;
+            }
+            this.search.width(searchWidth);
+        },
+
+        // multi
+        getVal: function () {
+            var val;
+            if (this.select) {
+                val = this.select.val();
+                return val === null ? [] : val;
+            } else {
+                val = this.opts.element.val();
+                return splitVal(val, this.opts.separator);
+            }
+        },
+
+        // multi
+        setVal: function (val) {
+            var unique;
+            if (this.select) {
+                this.select.val(val);
+            } else {
+                unique = [];
+                // filter out duplicates
+                $(val).each(function () {
+                    if (indexOf(this, unique) < 0) unique.push(this);
+                });
+                this.opts.element.val(unique.length === 0 ? "" : unique.join(this.opts.separator));
+            }
+        },
+
+        // multi
+        val: function () {
+            var val, data = [], self=this;
+
+            if (arguments.length === 0) {
+                return this.getVal();
+            }
+
+            val = arguments[0];
+
+            if (!val) {
+                this.opts.element.val("");
+                this.updateSelection([]);
+                this.clearSearch();
+                return;
+            }
+
+            // val is a list of ids
+            this.setVal(val);
+
+            if (this.select) {
+                this.select.find(":selected").each(function () {
+                    data.push({id: $(this).attr("value"), text: $(this).text()});
+                });
+                this.updateSelection(data);
+            } else {
+                if (this.opts.initSelection === undefined) {
+                    throw new Error("val() cannot be called if initSelection() is not defined")
+                }
+
+                this.opts.initSelection(this.opts.element, function(data){
+                    var ids=$(data).map(self.id);
+                    self.setVal(ids);
+                    self.updateSelection(data);
+                    self.clearSearch();
+                });
+            }
+            this.clearSearch();
+        },
+
+        // multi
+        onSortStart: function() {
+            if (this.select) {
+                throw new Error("Sorting of elements is not supported when attached to  instead.");
+            }
+
+            // collapse search field into 0 width so its container can be collapsed as well
+            this.search.width(0);
+            // hide the container
+            this.searchContainer.hide();
+        },
+
+        // multi
+        onSortEnd:function() {
+
+            var val=[], self=this;
+
+            // show search and move it to the end of the list
+            this.searchContainer.show();
+            // make sure the search container is the last item in the list
+            this.searchContainer.appendTo(this.searchContainer.parent());
+            // since we collapsed the width in dragStarted, we resize it here
+            this.resizeSearch();
+
+            // update selection
+
+            this.selection.find(".select2-search-choice").each(function() {
+                val.push(self.opts.id($(this).data("select2-data")));
+            });
+            this.setVal(val);
+            this.triggerChange();
+        },
+
+        // multi
+        data: function(values) {
+            var self=this, ids;
+            if (arguments.length === 0) {
+                 return this.selection
+                     .find(".select2-search-choice")
+                     .map(function() { return $(this).data("select2-data"); })
+                     .get();
+            } else {
+                if (!values) { values = []; }
+                ids = $.map(values, function(e) { return self.opts.id(e)});
+                this.setVal(ids);
+                this.updateSelection(values);
+                this.clearSearch();
+            }
+        }
+    });
+
+    $.fn.select2 = function () {
+
+        var args = Array.prototype.slice.call(arguments, 0),
+            opts,
+            select2,
+            value, multiple, allowedMethods = ["val", "destroy", "open", "close", "focus", "isFocused", "container", "onSortStart", "onSortEnd", "enable", "disable", "positionDropdown", "data"];
+
+        this.each(function () {
+            if (args.length === 0 || typeof(args[0]) === "object") {
+                opts = args.length === 0 ? {} : $.extend({}, args[0]);
+                opts.element = $(this);
+
+                if (opts.element.get(0).tagName.toLowerCase() === "select") {
+                    multiple = opts.element.attr("multiple");
+                } else {
+                    multiple = opts.multiple || false;
+                    if ("tags" in opts) {opts.multiple = multiple = true;}
+                }
+
+                select2 = multiple ? new MultiSelect2() : new SingleSelect2();
+                select2.init(opts);
+            } else if (typeof(args[0]) === "string") {
+
+                if (indexOf(args[0], allowedMethods) < 0) {
+                    throw "Unknown method: " + args[0];
+                }
+
+                value = undefined;
+                select2 = $(this).data("select2");
+                if (select2 === undefined) return;
+                if (args[0] === "container") {
+                    value=select2.container;
+                } else {
+                    value = select2[args[0]].apply(select2, args.slice(1));
+                }
+                if (value !== undefined) {return false;}
+            } else {
+                throw "Invalid arguments to select2 plugin: " + args;
+            }
+        });
+        return (value === undefined) ? this : value;
+    };
+
+    // plugin defaults, accessible to users
+    $.fn.select2.defaults = {
+        width: "copy",
+        closeOnSelect: true,
+        containerCss: {},
+        dropdownCss: {},
+        containerCssClass: "",
+        dropdownCssClass: "",
+        formatResult: function(result, container, query) {
+            var markup=[];
+            markMatch(result.text, query.term, markup);
+            return markup.join("");
+        },
+        formatSelection: function (data, container) {
+            return data.text;
+        },
+        formatNoMatches: function () { return "No matches found"; },
+        formatInputTooShort: function (input, min) { return "Please enter " + (min - input.length) + " more characters"; },
+        formatSelectionTooBig: function (limit) { return "You can only select " + limit + " items"; },
+        formatLoadMore: function (pageNumber) { return "Loading more results..."; },
+        minimumResultsForSearch: 0,
+        minimumInputLength: 0,
+        maximumSelectionSize: 0,
+        id: function (e) { return e.id; },
+        matcher: function(term, text) {
+            return text.toUpperCase().indexOf(term.toUpperCase()) >= 0;
+        }
+    };
+
+    // exports
+    window.Select2 = {
+        query: {
+            ajax: ajax,
+            local: local,
+            tags: tags
+        }, util: {
+            debounce: debounce,
+            markMatch: markMatch
+        }, "class": {
+            "abstract": AbstractSelect2,
+            "single": SingleSelect2,
+            "multi": MultiSelect2
+        }
+    };
+
+}(jQuery));
diff --git a/select2-3.0/select2.min.js b/select2-3.0/select2.min.js
new file mode 100644
index 00000000..2b890b07
--- /dev/null
+++ b/select2-3.0/select2.min.js
@@ -0,0 +1,76 @@
+/*
+Copyright 2012 Igor Vaynberg
+ 
+Version: 3.0 Timestamp: Tue Jul 31 21:09:16 PDT 2012
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in
+compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations under the License.
+*/
+(function(f){"undefined"==typeof f.fn.each2&&f.fn.extend({each2:function(h){for(var l=f([0]),j=-1,m=this.length;++ja.length)return[];c=a.split(b);d=0;for(g=c.length;dd?c.push(a):(c.push(a.substring(0,d)),c.push(""),c.push(a.substring(d,d+b)),c.push(""),c.push(a.substring(d+b,a.length)))}
+function B(a){var b,c=0,d=null,g=a.quietMillis||100;return function(k){window.clearTimeout(b);b=window.setTimeout(function(){var b=c+=1,g=a.data,e=a.transport||f.ajax,h=a.type||"GET",g=g.call(this,k.term,k.page,k.context);null!==d&&d.abort();d=e.call(null,{url:a.url,dataType:a.dataType,data:g,type:h,success:function(d){b=a}};f(document).delegate("*","mousemove",function(a){f.data(document,"select2-lastpos",{x:a.pageX,y:a.pageY})});f(document).ready(function(){f(document).delegate("*","mousedown touchend",function(a){var b=f(a.target).closest("div.select2-container").get(0),c;b?f(document).find("div.select2-container-active").each(function(){this!==
+b&&f(this).data("select2").blur()}):(b=f(a.target).closest("div.select2-drop").get(0),f(document).find("div.select2-drop-active").each(function(){this!==b&&f(this).data("select2").blur()}));b=f(a.target);c=b.attr("for");"LABEL"===a.target.tagName&&(c&&0=c-g?(b.scrollTop(0),i(a)):0>g&&b.get(0).scrollHeight-b.scrollTop()+g<=b.height()&&(b.scrollTop(b.get(0).scrollHeight-
+b.height()),i(a))});c.bind("keydown",function(){f.data(c,"keyup-change-value")===h&&f.data(c,"keyup-change-value",c.val())});c.bind("keyup",function(){var a=f.data(c,"keyup-change-value");a!==h&&c.val()!==a&&(f.removeData(c,"keyup-change-value"),c.trigger("keyup-change"))});c.bind("keyup-change",this.bind(this.updateResults));c.bind("focus",function(){c.addClass("select2-focused");" "===c.val()&&c.val("")});c.bind("blur",function(){c.removeClass("select2-focused")});this.dropdown.delegate(".select2-results",
+"mouseup",this.bind(function(a){0 element.");});a=f.extend({},{populateResults:function(b,c,d){var e,E=this.opts.id;e=function(b,
+c,g){var k,i,j,p,q,n,m;k=0;for(i=b.length;k0;n=f("
  • ");n.addClass("select2-results-dept-"+g);n.addClass("select2-result");n.addClass(p?"select2-result-selectable":"select2-result-unselectable");q&&n.addClass("select2-result-with-children");p=f("
    ");p.addClass("select2-result-label");m=a.formatResult(j,p,d);m!==h&&p.html(l(m));n.append(p);if(q){q=f("
      ");q.addClass("select2-result-sub");e(j.children,q,g+1);n.append(q)}n.data("select2-data",
+j);c.append(n)}};e(c,b,0)}},f.fn.select2.defaults,a);"function"!==typeof a.id&&(d=a.id,a.id=function(a){return a[d]});if(c)a.query=this.bind(function(a){var c={results:[],more:false},d=a.term,e,i,j;j=function(b,c){var f;if(b.is("option"))a.matcher(d,b.text(),b)&&c.push({id:b.attr("value"),text:b.text(),element:b.get()});else if(b.is("optgroup")){f={text:b.attr("label"),children:[],element:b.get()};b.children().each2(function(a,b){j(b,f.children)});f.children.length>0&&c.push(f)}};e=b.children();if(this.getPlaceholder()!==
+h&&e.length>0){i=e[0];f(i).text()===""&&(e=e.not(i))}e.each2(function(a,b){j(b,c.results)});a.callback(c)}),a.id=function(a){return a.id};else if(!("query"in a))if("ajax"in a){if((c=a.element.data("ajax-url"))&&0=this.body().scrollTop(),h;this.dropdown.hasClass("select2-drop-above")?(h=!0,!e&&g&&(h=!1)):(h=!1,!g&&e&&(h=!0));h?(b=a.top-d,this.container.addClass("select2-drop-above"),this.dropdown.addClass("select2-drop-above")):(this.container.removeClass("select2-drop-above"),this.dropdown.removeClass("select2-drop-above"));this.dropdown.css({top:b,left:a.left,
+width:c})},shouldOpen:function(){var a;if(this.opened())return!1;a=jQuery.Event("open");this.opts.element.trigger(a);return!a.isDefaultPrevented()},clearDropdownAlignmentPreference:function(){this.container.removeClass("select2-drop-above");this.dropdown.removeClass("select2-drop-above")},open:function(){if(!this.shouldOpen())return!1;window.setTimeout(this.bind(this.opening),1);return!0},opening:function(){this.clearDropdownAlignmentPreference();" "===this.search.val()&&this.search.val("");this.dropdown.addClass("select2-drop-active");
+this.container.addClass("select2-dropdown-open").addClass("select2-container-active");this.updateResults(!0);this.dropdown[0]!==this.body().children().last()[0]&&this.dropdown.detach().appendTo(this.body());this.dropdown.show();this.ensureHighlightVisible();this.positionDropdown();this.focusSearch()},close:function(){this.opened()&&(this.clearDropdownAlignmentPreference(),this.dropdown.hide(),this.container.removeClass("select2-dropdown-open").removeClass("select2-container-active"),this.results.empty(),
+this.clearSearch(),this.opts.element.trigger(jQuery.Event("close")))},clearSearch:function(){},ensureHighlightVisible:function(){var a=this.results,b,c,d,g;c=this.highlight();0>c||(0==c?a.scrollTop(0):(b=a.find(".select2-result-selectable"),d=f(b[c]),g=d.offset().top+d.outerHeight(),c===b.length-1&&(b=a.find("li.select2-more-results"),0b&&a.scrollTop(a.scrollTop()+(g-b)),d=d.offset().top-a.offset().top,0>d&&a.scrollTop(a.scrollTop()+
+d)))},moveHighlight:function(a){for(var b=this.results.find(".select2-result-selectable"),c=this.highlight();-1=b.length&&(a=b.length-1);0>a&&(a=0);b.removeClass("select2-highlighted");
+f(b[a]).addClass("select2-highlighted");this.ensureHighlightVisible()},countSelectableResults:function(){return this.results.find(".select2-result-selectable").not(".select2-disabled").length},highlightUnderEvent:function(a){a=f(a.target).closest(".select2-result-selectable");if(0=c&&(b.addClass("select2-active"),this.opts.query({term:e,page:d,context:h,matcher:this.opts.matcher,callback:this.bind(function(c){f.opts.populateResults.call(this,a,c.results,{term:e,page:d,context:h});!0===c.more?(b.detach().appendTo(a.children(":last")).text(f.opts.formatLoadMore(d+1)),window.setTimeout(function(){f.loadMoreIfNeeded()},
+10)):b.remove();f.positionDropdown();f.resultsPage=d})})))},updateResults:function(a){function b(){g.scrollTop(0);d.removeClass("select2-active");j.positionDropdown()}function c(a){g.html(l(a));b()}var d=this.search,g=this.results,e=this.opts,i,j=this;if(!(!0!==a&&(!1===this.showSearchInput||!this.opened()))){d.addClass("select2-active");if(1<=e.maximumSelectionSize&&(i=this.data(),f.isArray(i)&&i.length>=e.maximumSelectionSize&&s(e.formatSelectionTooBig,"formatSelectionTooBig"))){c("
    • "+
+e.formatSelectionTooBig(e.maximumSelectionSize)+"
      • ");return}d.val().length"+e.formatInputTooShort(d.val(),e.minimumInputLength)+""):(this.resultsPage=1,e.query({term:d.val(),page:this.resultsPage,context:null,matcher:e.matcher,callback:this.bind(function(i){var o;this.context=i.context===h?null:i.context;this.opts.createSearchChoice&&""!==d.val()&&(o=this.opts.createSearchChoice.call(null,
+d.val(),i.results),o!==h&&null!==o&&j.id(o)!==h&&null!==j.id(o)&&0===f(i.results).filter(function(){return m(j.id(this),j.id(o))}).length&&i.results.unshift(o));0===i.results.length&&s(e.formatNoMatches,"formatNoMatches")?c("
    • "+e.formatNoMatches(d.val())+"
      • "):(g.empty(),j.opts.populateResults.call(this,g,i.results,{term:d.val(),page:this.resultsPage,context:null}),!0===i.more&&s(e.formatLoadMore,"formatLoadMore")&&(g.children().filter(":last").append("
    • "+
+l(e.formatLoadMore(this.resultsPage))+"
      • "),window.setTimeout(function(){j.loadMoreIfNeeded()},10)),this.postprocessResults(i,a),b())})}))}},cancel:function(){this.close()},blur:function(){this.close();this.container.removeClass("select2-container-active");this.dropdown.removeClass("select2-drop-active");this.search[0]===document.activeElement&&this.search.blur();this.clearSearch();this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus")},focusSearch:function(){window.setTimeout(this.bind(function(){this.search.focus();
+this.search.val(this.search.val())}),10)},selectHighlighted:function(){var a=this.highlight(),b=this.results.find(".select2-highlighted").not(".select2-disabled"),c=b.closest(".select2-result-selectable").data("select2-data");c&&(b.addClass("select2-disabled"),this.highlight(a),this.onSelect(c))},getPlaceholder:function(){return this.opts.element.attr("placeholder")||this.opts.element.attr("data-placeholder")||this.opts.element.data("placeholder")||this.opts.placeholder},initContainerWidth:function(){var a=
+function(){var a,c,d,e;if("off"===this.opts.width)return null;if("element"===this.opts.width)return 0===this.opts.element.outerWidth()?"auto":this.opts.element.outerWidth()+"px";if("copy"===this.opts.width||"resolve"===this.opts.width){a=this.opts.element.attr("style");if(a!==h){a=a.split(";");d=0;for(e=a.length;d",{"class":"select2-container"}).html("          
          
         
                
         
           
      ")},
+opening:function(){this.search.show();this.parent.opening.apply(this,arguments);this.dropdown.removeClass("select2-offscreen")},close:function(){this.opened()&&(this.parent.close.apply(this,arguments),this.dropdown.removeAttr("style").addClass("select2-offscreen").insertAfter(this.selection).show())},focus:function(){this.close();this.selection.focus()},isFocused:function(){return this.selection[0]===document.activeElement},cancel:function(){this.parent.cancel.apply(this,arguments);this.selection.focus()},
+initContainer:function(){var a,b=this.dropdown;this.selection=a=this.container.find(".select2-choice");this.search.bind("keydown",this.bind(function(a){if(this.enabled)if(a.which===e.PAGE_UP||a.which===e.PAGE_DOWN)i(a);else if(this.opened())switch(a.which){case e.UP:case e.DOWN:this.moveHighlight(a.which===e.UP?-1:1);i(a);break;case e.TAB:case e.ENTER:this.selectHighlighted();i(a);break;case e.ESC:this.cancel(a),i(a)}else a.which===e.TAB||(e.isControl(a)||e.isFunctionKey(a)||a.which===e.ESC)||this.open()}));
+this.search.bind("focus",this.bind(function(){this.selection.attr("tabIndex","-1")}));this.search.bind("blur",this.bind(function(){this.opened()||this.container.removeClass("select2-container-active");window.setTimeout(this.bind(function(){this.selection.attr("tabIndex",this.opts.element.attr("tabIndex"))}),10)}));a.bind("mousedown",this.bind(function(a){this.opened()?(this.close(),this.selection.focus()):this.enabled&&this.open();i(a)}));b.bind("mousedown",this.bind(function(){this.search.focus()}));
+a.bind("focus",this.bind(function(){this.container.addClass("select2-container-active");this.search.attr("tabIndex","-1")}));a.bind("blur",this.bind(function(){this.container.removeClass("select2-container-active");window.setTimeout(this.bind(function(){this.search.attr("tabIndex",this.opts.element.attr("tabIndex"))}),10)}));a.bind("keydown",this.bind(function(a){if(this.enabled)if(a.which===e.PAGE_UP||a.which===e.PAGE_DOWN)i(a);else if(!(a.which===e.TAB||e.isControl(a)||e.isFunctionKey(a)||a.which===
+e.ESC)){this.open();if(a.which!==e.ENTER&&!(48>a.which)){var b=String.fromCharCode(a.which).toLowerCase();a.shiftKey&&(b=b.toUpperCase());this.search.val(b)}i(a)}}));a.delegate("abbr","mousedown",this.bind(function(a){this.enabled&&(this.clear(),i(a),this.close(),this.triggerChange(),this.selection.focus())}));this.setPlaceholder();this.search.bind("focus",this.bind(function(){this.container.addClass("select2-container-active")}))},clear:function(){this.opts.element.val("");this.selection.find("span").empty();
+this.selection.removeData("select2-data");this.setPlaceholder()},initSelection:function(){if(""===this.opts.element.val())this.close(),this.setPlaceholder();else{var a=this;this.opts.initSelection.call(null,this.opts.element,function(b){b!==h&&null!==b&&(a.updateSelection(b),a.close(),a.setPlaceholder())})}},prepareOpts:function(){var a=this.parent.prepareOpts.apply(this,arguments);"select"===a.element.get(0).tagName.toLowerCase()&&(a.initSelection=function(a,c){var d=a.find(":selected");f.isFunction(c)&&
+c({id:d.attr("value"),text:d.text()})});return a},setPlaceholder:function(){var a=this.getPlaceholder();""===this.opts.element.val()&&a!==h&&!(this.select&&""!==this.select.find("option:first").text())&&(this.selection.find("span").html(l(a)),this.selection.addClass("select2-default"),this.selection.find("abbr").hide())},postprocessResults:function(a,b){var c=0,d=this,e=!0;this.results.find(".select2-result-selectable").each2(function(a,b){if(m(d.id(b.data("select2-data")),d.opts.element.val()))return c=
+a,!1});this.highlight(c);!0===b&&(e=this.showSearchInput=a.results.length>=this.opts.minimumResultsForSearch,this.dropdown.find(".select2-search")[e?"removeClass":"addClass"]("select2-search-hidden"),f(this.dropdown,this.container)[e?"addClass":"removeClass"]("select2-with-searchbox"))},onSelect:function(a){var b=this.opts.element.val();this.opts.element.val(this.id(a));this.updateSelection(a);this.close();this.selection.focus();m(b,this.id(a))||this.triggerChange()},updateSelection:function(a){var b=
+this.selection.find("span");this.selection.data("select2-data",a);b.empty();a=this.opts.formatSelection(a,b);a!==h&&b.append(l(a));this.selection.removeClass("select2-default");this.opts.allowClear&&this.getPlaceholder()!==h&&this.selection.find("abbr").show()},val:function(){var a,b=null,c=this;if(0===arguments.length)return this.opts.element.val();a=arguments[0];if(this.select)this.select.val(a).find(":selected").each2(function(a,c){b={id:c.attr("value"),text:c.text()};return!1}),this.updateSelection(b),
+this.setPlaceholder();else{if(this.opts.initSelection===h)throw Error("cannot call val() if initSelection() is not defined");a?this.opts.initSelection(this.opts.element,function(a){c.opts.element.val(!a?"":c.id(a));c.updateSelection(a);c.setPlaceholder()}):this.clear()}},clearSearch:function(){this.search.val("")},data:function(a){var b;if(0===arguments.length)return b=this.selection.data("select2-data"),b==h&&(b=null),b;!a||""===a?this.clear():(this.opts.element.val(!a?"":this.id(a)),this.updateSelection(a))}});
+x=v(u,{createContainer:function(){return f("
      ",{"class":"select2-container select2-container-multi"}).html("    
          
      •       
      ")},prepareOpts:function(){var a=this.parent.prepareOpts.apply(this,arguments);"select"===a.element.get(0).tagName.toLowerCase()&&
+(a.initSelection=function(a,c){var d=[];a.find(":selected").each2(function(a,b){d.push({id:b.attr("value"),text:b.text()})});f.isFunction(c)&&c(d)});return a},initContainer:function(){var a;this.searchContainer=this.container.find(".select2-search-field");this.selection=a=this.container.find(".select2-choices");this.search.bind("keydown",this.bind(function(b){if(this.enabled){if(b.which===e.BACKSPACE&&""===this.search.val()){this.close();var c;c=a.find(".select2-search-choice-focus");if(0j(d.id(this),b)&&(b.push(d.id(this)),c.push(this))});a=c;this.selection.find(".select2-search-choice").remove();f(a).each(function(){d.addSelectedChoice(this)});
+d.postprocessResults()},onSelect:function(a){this.addSelectedChoice(a);this.select&&this.postprocessResults();this.opts.closeOnSelect?(this.close(),this.search.width(10)):(this.search.width(10),this.resizeSearch(),0    
          "),
+c=this.id(a),d=this.getVal(),e;e=this.opts.formatSelection(a,b);b.find("div").replaceWith("
      "+l(e)+"
      ");b.find(".select2-search-choice-close").bind("click dblclick",this.bind(function(a){this.enabled&&(f(a.target).closest(".select2-search-choice").fadeOut("fast").animate({width:"hide"},50,this.bind(function(){this.unselect(f(a.target));this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");this.close();this.focusSearch()})).dequeue(),i(a))})).bind("focus",
+this.bind(function(){this.enabled&&(this.container.addClass("select2-container-active"),this.dropdown.addClass("select2-drop-active"))}));b.data("select2-data",a);b.insertBefore(this.searchContainer);d.push(c);this.setVal(d)},unselect:function(a){var b=this.getVal(),c,d,a=a.closest(".select2-search-choice");if(0===a.length)throw"Invalid argument: "+a+". Must be .select2-search-choice";c=a.data("select2-data");d=j(this.id(c),b);0<=d&&(b.splice(d,1),this.setVal(b),this.select&&this.postprocessResults());
+a.remove();this.triggerChange({removed:c})},postprocessResults:function(){var a=this.getVal(),b=this.results.find(".select2-result-selectable"),c=this.results.find(".select2-result-with-children"),d=this;b.each2(function(b,c){var f=d.id(c.data("select2-data"));0<=j(f,a)?c.addClass("select2-disabled").removeClass("select2-result-selectable"):c.removeClass("select2-disabled").addClass("select2-result-selectable")});c.each2(function(a,b){0==b.find(".select2-result-selectable").length?b.addClass("select2-disabled"):
+b.removeClass("select2-disabled")});b.each2(function(a,b){if(!b.hasClass("select2-disabled")&&b.hasClass("select2-result-selectable"))return d.highlight(0),!1})},resizeSearch:function(){var a,b,c,d,e=this.search.outerWidth()-this.search.width();a=this.search;r||(c=a[0].currentStyle||window.getComputedStyle(a[0],null),r=f("
      ").css({position:"absolute",left:"-10000px",top:"-10000px",display:"none",fontSize:c.fontSize,fontFamily:c.fontFamily,fontStyle:c.fontStyle,fontWeight:c.fontWeight,letterSpacing:c.letterSpacing,
+textTransform:c.textTransform,whiteSpace:"nowrap"}),f("body").append(r));r.text(a.val());a=r.width()+10;b=this.search.offset().left;c=this.selection.width();d=this.selection.offset().left;b=c-(b-d)-e;bb&&(b=c-e);this.search.width(b)},getVal:function(){var a;if(this.select)return a=this.select.val(),null===a?[]:a;a=this.opts.element.val();return y(a,this.opts.separator)},setVal:function(a){var b;this.select?this.select.val(a):(b=[],f(a).each(function(){0>j(this,b)&&b.push(this)}),this.opts.element.val(0===
+b.length?"":b.join(this.opts.separator)))},val:function(){var a,b=[],c=this;if(0===arguments.length)return this.getVal();if(a=arguments[0])if(this.setVal(a),this.select)this.select.find(":selected").each(function(){b.push({id:f(this).attr("value"),text:f(this).text()})}),this.updateSelection(b);else{if(this.opts.initSelection===h)throw Error("val() cannot be called if initSelection() is not defined");this.opts.initSelection(this.opts.element,function(a){var b=f(a).map(c.id);c.setVal(b);c.updateSelection(a);
+c.clearSearch()})}else this.opts.element.val(""),this.updateSelection([]);this.clearSearch()},onSortStart:function(){if(this.select)throw Error("Sorting of elements is not supported when attached to  instead.");this.search.width(0);this.searchContainer.hide()},onSortEnd:function(){var a=[],b=this;this.searchContainer.show();this.searchContainer.appendTo(this.searchContainer.parent());this.resizeSearch();this.selection.find(".select2-search-choice").each(function(){a.push(b.opts.id(f(this).data("select2-data")))});
+this.setVal(a);this.triggerChange()},data:function(a){var b=this,c;if(0===arguments.length)return this.selection.find(".select2-search-choice").map(function(){return f(this).data("select2-data")}).get();a||(a=[]);c=f.map(a,function(a){return b.opts.id(a)});this.setVal(c);this.updateSelection(a);this.clearSearch()}});f.fn.select2=function(){var a=Array.prototype.slice.call(arguments,0),b,c,d,e,i="val destroy open close focus isFocused container onSortStart onSortEnd enable disable positionDropdown data".split(" ");
+this.each(function(){if(0===a.length||"object"===typeof a[0])b=0===a.length?{}:f.extend({},a[0]),b.element=f(this),"select"===b.element.get(0).tagName.toLowerCase()?e=b.element.attr("multiple"):(e=b.multiple||!1,"tags"in b&&(b.multiple=e=!0)),c=e?new x:new w,c.init(b);else if("string"===typeof a[0]){if(0>j(a[0],i))throw"Unknown method: "+a[0];d=h;c=f(this).data("select2");if(c!==h&&(d="container"===a[0]?c.container:c[a[0]].apply(c,a.slice(1)),d!==h))return!1}else throw"Invalid arguments to select2 plugin: "+
+a;});return d===h?this:d};f.fn.select2.defaults={width:"copy",closeOnSelect:!0,containerCss:{},dropdownCss:{},containerCssClass:"",dropdownCssClass:"",formatResult:function(a,b,c){b=[];A(a.text,c.term,b);return b.join("")},formatSelection:function(a){return a.text},formatNoMatches:function(){return"No matches found"},formatInputTooShort:function(a,b){return"Please enter "+(b-a.length)+" more characters"},formatSelectionTooBig:function(a){return"You can only select "+a+" items"},formatLoadMore:function(){return"Loading more results..."},
+minimumResultsForSearch:0,minimumInputLength:0,maximumSelectionSize:0,id:function(a){return a.id},matcher:function(a,b){return 0<=b.toUpperCase().indexOf(a.toUpperCase())}};window.Select2={query:{ajax:B,local:C,tags:D},util:{debounce:z,markMatch:A},"class":{"abstract":u,single:w,multi:x}}}})(jQuery);
diff --git a/select2-3.0/select2.png b/select2-3.0/select2.png
new file mode 100755
index 0000000000000000000000000000000000000000..d08e4b7e624c44f4fb862f23f046262780847490
GIT binary patch
literal 396
zcmV;70dxL|P)~c7VWO
z{Q}IDn{i!TF4#od;X3Q_#kIK3wRl==hwEDRz~*jyTo-K>u-u(nATT<+akgC{FyDRG
qFW$B*q*ia+6;i9W9%5_PVDkwXFTX6NOX?H=0000v)e5ZBQx4|Y-Q?nr@Px3?9h(3ZWr3^tj=`TP57gKr87N$
zp2wWee1GRRCwo_xahnw)5cxNPJbCg2L6DV|6`#+yw6v6!mDS$f9-JvFD^n;GQ&UrZ
zzh5jCkByB101O60U0q#p_1BM>Cv-vP?&s4@g_((4_1L=L$(a91)0=J91Gas#R{McE
znYG^9*0A5YZ>#;~+Wkn(W5B0^yELIYLP!K}mB~<)AM@1&nqekynuaEGqPrzoH|KodRXJy)%+w_fu3nE5>@Bd_b
zqC$EQ;{c`T&?EsNO|igL9gC7Ygxv?aQUEXMq?~>wg{EyW;VcJ37CUF#HjrT=KQO_*
zS>M9yydXk18D(+QDJ1>r);Lav_uYKp$T?4vr{Q$lTo&pKv^?(>L-)G2*lwH!Ah7k?
z7oH<8h-(KTKt5V6$8gF)C7Io&P5=SjTh)=zV=E2EUhQZP##L8S{d%UK>>+y82>+FV+#^BzW7u3F)Bb>=lYQ%%j`F>ASe
zo*cw@V#u6T`A2He;70mR(V&iV&-7{qP~=SRf&jm9-T{*ZeZ}$rd0#6c&fLG^xJcf5
z+p<`wJYgW+_s*V{uI$nMB;%8`S_3>PfGOj3Rq}@Cx^+j?rk92fANSFDBYnOqQ>Vdj
z)(|$AhP4t&Lb=Gvo2#3Gl%9<=Gv`Mz?Po@P4iLF!x}GUWJICDlFk-hS^Whyh7x~VH
z@0vD1>HYD4&e+~yzS*-sFR{9`{QEEZO1zg7>R&7cHts-6j!xHVdA8eI+ZlVzd%`es
zJT@$#GX(gvCJ1oJN%yLBK}{V=V;seo;!w|Yte!W1%5qLNFWqvZW>h&IiH+oPT=b@E
zPhGzv5=(Un*X>v`>%8h_nj^NdYcE6NHS_ifkCV$*D)Tqrbu`s;<=t<4
zAHNqNV?6(g<1PY-w@#I-WYFViz?9TrkMr)u0g`O`u|>T;k|2sV*YF^punvT;$SuTy{j3Gv)yqD!R_CF>yR)MzmmYS5v+~R
zXAdD%ng9?df;wd8GxR#%3O+gz};Vo;)sK%Bj-q>Oq%R7JU-KD?vYu>#2UjaDo
z&8$>5xW~?KPD_#XFToU1hIb*VOMidUr6iYiO0N|i-7s`T8!cFT`rN!^1Pt78J93i6
z5HI1wIM$94m{3SLDvISDe6$ZG1;eq_D9RTaaC>=cO{@Bs>$IlPCPJJ$h$)-3vzNUQ6OsN#_zWxey!_9%hxwH2_dEJi=yY|1c7nDm2_Lm!Cof8-R_+9UkS
zcBE(o47yE)oMR(Q=dp1a2wTX5KvvGyLqlWTa7V&!A*|w|)ax~1_~aJ0=_Lilg*0iQk7#ZD
EAHN$8j{pDw

literal 0
HcmV?d00001

diff --git a/select2-latest.html b/select2-latest.html
index febf2cd5..683f1487 100755
--- a/select2-latest.html
+++ b/select2-latest.html
@@ -2,7 +2,7 @@
 layout: main
 title: Select2 Latest
 group: navigation
-version: 3.0
+version: 3.1
 ---
 
 
@@ -218,21 +218,10 @@ $("#e10_3").select2({
 
 
         
      
-            
      Changelog from 2.x
      
+            
      Changelog from 3.0
      
             
      
                 
        
-                    
      • Dropdown div is now appended directly to body and is absolutely positioned. This should allow the dropdown to overlap height-constrained containers such as modal windows.
        • 
-                    
      • Optgroups are now supported in selects. N-level deep nesting of results is supported when attached to input[type=hidden], see the new children property described in the docs.
        • 
-                    
      • Signature of initSeletion has changed to support initialization from asynchronous requests.
        • 
-                    
      • Dropdown will now open below or above the control depending on available screen space. No more scrolling the page to see to see all matched results.
        • 
-                    
      • Signature of formatSelection and formatResult changed in a backwards compatible way to support more powerful constructs than supported by strings alone.
        • 
-                    
      • Separator in multi-valued selects is now cofigurable, , still the default. See separator option in the docs.
        • 
-                    
      • Matching is now customizable. See matcher function in the docs and the Custom Matcher example.
        • 
-                    
      • change event now specifies which elements were added/removed
        • 
-                    
      • width option now supports various strategies instead of always being copied from the source element
        • 
-                    
      • Clicks on a label associated with the source element are now redirected to Select2.
        • 
-                    
      • val will now only accept ids, if you want to specify the full object for the selection use the new data method instead. val will also now only work on non-selects if initSelection was specified.
        • 
-                    
      • It is now possible to limit the number of options that can be selected in a multi-select component. See the Maximum Selection Size example
        • 
+
                 
      
             
      
         
      
@@ -240,7 +229,7 @@ $("#e10_3").select2({
         
      
             
      Browser Compatibility
      
             
        
-                
      • IE 8+ (7 mostly works except for issue with z-index)
        • 
+                
      • IE 7+
        • 
                 
      • Chrome 8+
        • 
                 
      • Firefox 3.5+
        • 
                 
      • Safari 3+
        • 
@@ -1299,4 +1288,4 @@ $("#tags").select2({
        update();
     });
 
--->
\ No newline at end of file
+-->