Add autocompletion for SP selection menu

Using autocomplete JQuery UI widget : http://jqueryui.com/autocomplete/


git-svn-id: https://svn.geant.net/GEANT/edugain_testidp_account_manager/trunk@46 047e039d-479c-447e-8a29-aa6bf4a09bab

templates/web/account_wizard.tt2.html

@@ -88,6 +88,13 @@ jQuery(document).ready(function($){
 
 });
 
+$(function() {
+    $( "#sp_entityid" ).combobox();
+    $( "#toggle" ).click(function() {
+        $( "#combobox" ).toggle();
+    });
+});
+
 </script>
 
 
@@ -103,7 +110,9 @@ This Test Identity Provider allows you to create test accounts with different pr
 in eduGAIN inter-federation. Note that only a Service Provider administrator can create accounts here.
 <br/><br/>
 
-<label for="sp_entityid">Please select your Service Provider below</label>
+<label for="sp_entityid">Please select your Service Provider in the list below:</label><br/>
+(Note that a search is performed while you type the SP name)<br/>
+
     
     <select id="sp_entityid" name="sp_entityid" class="required">
         <option value="">Select your Service Provider below</option>
@@ -113,7 +122,6 @@ in eduGAIN inter-federation. Note that only a Service Provider administrator can
     </select>
     <br/>
 </div>
-
 </fieldset>
 
 <h3>Send email challenge</h3>

templates/web/index.tt2.html

@@ -45,6 +45,137 @@ function hide(div) {
     oDiv.style.display = "none";
 }
 
+jQuery(document).ready(function($){
+
+    $.widget( "custom.combobox", {
+        _create: function() {
+            this.wrapper = $( "<span>" )
+            .addClass( "custom-combobox" )
+            .insertAfter( this.element );
+
+            this.element.hide();
+            this._createAutocomplete();
+            this._createShowAllButton();
+        },
+
+        _createAutocomplete: function() {
+            var selected = this.element.children( ":selected" ),
+                value = selected.val() ? selected.text() : "";
+
+            this.input = $( "<input>" )
+                .appendTo( this.wrapper )
+                .val( value )
+                .attr( "title", "" )
+                .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
+                .autocomplete({
+                    delay: 0,
+                    minLength: 0,
+                    source: $.proxy( this, "_source" )
+                })
+                .tooltip({
+                    tooltipClass: "ui-state-highlight"
+            });
+
+            this._on( this.input, {
+                autocompleteselect: function( event, ui ) {
+                    ui.item.option.selected = true;
+                    this._trigger( "select", event, {
+                        item: ui.item.option
+                    });
+                },
+ 
+                autocompletechange: "_removeIfInvalid"
+            });
+        },
+
+        _createShowAllButton: function() {
+            var input = this.input,
+            wasOpen = false;
+    
+            $( "<a>" )
+                .attr( "tabIndex", -1 )
+                .attr( "title", "Show All Items" )
+                .tooltip()
+                .appendTo( this.wrapper )
+                .button({
+                    icons: {
+                        primary: "ui-icon-triangle-1-s"
+                    },
+                    text: false
+                })
+                .removeClass( "ui-corner-all" )
+                .addClass( "custom-combobox-toggle ui-corner-right" )
+                .mousedown(function() {
+                    wasOpen = input.autocomplete( "widget" ).is( ":visible" );
+                })
+                .click(function() {
+                    input.focus();
+            
+                    // Close if already visible
+                    if ( wasOpen ) {
+                    return;
+                    }
+            
+                    // Pass empty string as value to search for, displaying all results
+                    input.autocomplete( "search", "" );
+                });
+        },
+        
+        _source: function( request, response ) {
+            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
+            response( this.element.children( "option" ).map(function() {
+                var text = $( this ).text();
+                if ( this.value && ( !request.term || matcher.test(text) ) )
+                    return {
+                        label: text,
+                        value: text,
+                        option: this
+                    };
+            }) );
+        },
+        
+        _removeIfInvalid: function( event, ui ) {
+ 
+            // Selected an item, nothing to do
+            if ( ui.item ) {
+                return;
+            }
+
+            // Search for a match (case-insensitive)
+            var value = this.input.val(),
+                valueLowerCase = value.toLowerCase(),
+                valid = false;
+            this.element.children( "option" ).each(function() {
+                if ( $( this ).text().toLowerCase() === valueLowerCase ) {
+                    this.selected = valid = true;
+                    return false;
+                }
+            });
+            
+            // Found a match, nothing to do
+            if ( valid ) {
+                return;
+            }
+            
+            // Remove invalid value
+            this.input
+                .val( "" )
+                .attr( "title", value + " didn't match any item" )
+                .tooltip( "open" );
+            this.element.val( "" );
+            this._delay(function() {
+                this.input.tooltip( "close" ).attr( "title", "" );
+            }, 2500 );
+            this.input.autocomplete( "instance" ).term = "";
+        },
+
+        _destroy: function() {
+            this.wrapper.remove();
+            this.element.show();
+        }
+    });
+})( jQuery );
+
 //-->      
 </SCRIPT>
 
@@ -65,6 +196,40 @@ div.important{border-style:solid;border-color:black;border-width:1px;background-
 .scrollable{overflow-y: scroll;}
 fieldset.scrollable{height: 75%;}
 .wizard .content div.radio_inline input[type="radio"]{display: inline;}
+
+.custom-combobox {
+    position: relative;
+    display: inline-block;
+}
+.custom-combobox-toggle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin-left: -1px;
+    padding: 0;
+}
+.custom-combobox-input {
+    margin: 0;
+    padding: 5px 10px;
+    padding-left: 40px;
+    width: 600px;
+
+}
+
+.ui-autocomplete {
+		max-height: 400px;
+		overflow-y: auto;
+		/* prevent horizontal scrollbar */
+		overflow-x: hidden;
+}
+/* IE 6 doesn't support max-height
+* we use height instead, but this forces the menu to always be this tall
+*/
+* html .ui-autocomplete {
+  height: 400px;
+}
+
+	
 --></STYLE>
 <title> [% PROCESS 'templates/web/title.tt2.html' %] </title>