Changeset 13288

Timestamp:

04/08/08 15:38:57 (8 months ago)

Author:

wolfram

Message:

+ highlightMatch option to combobox, fixes#6461
+ CSS dijitComboBoxHighlightMatch class

Location:

dijit/trunk

Files:

• form/ComboBox.js (modified) (4 diffs)
• tests/form/test_ComboBox.html (modified) (2 diffs)
• themes/nihilo/form/Common.css (modified) (1 diff)
• themes/soria/form/Common.css (modified) (1 diff)
• themes/tundra/form/Common.css (modified) (1 diff)

dijit/trunk/form/ComboBox.js

@@ -39 +39 @@
                 autoComplete: true,
 
+                // highlightMatch: Boolean
+                //              If the ComboBox opens with the serach results and the searched
+                //              string can be found it will be highlighted.
+                //              This value is not considered when labelType!="text" to not
+                //              screw up any mark up the label might contain.
+                highlightMatch: true,
+                
                 // searchDelay: Integer
                 //              Delay in milliseconds between when user types something and we start
@@ -506 +513 @@
                         this.item = null; // #4872
                         var query = dojo.clone(this.query); // #5970
+                        this._lastInput = key; // Store exactly what was entered by the user.
                         this._lastQuery = query[this.searchAttr] = this._getQueryString(key);
                         // #5970: set _lastQuery, *then* start the timeout
@@ -625 +633 @@
 
                 _getMenuLabelFromItem:function(/*Item*/ item){
-                        return {
-                                html: this.labelType=="html", 
-                                label: this.store.getValue(item, this.labelAttr || this.searchAttr)
-                        };
+                        var label = this.store.getValue(item, this.labelAttr || this.searchAttr);
+                        var labelType = this.labelType;
+                        // If labelType is not "text" we don't want to screw any markup ot whatever.
+                        if (this.highlightMatch==true && this.labelType=="text" && this._lastInput){
+                                label = this.doHighlight(label);
+                                labelType = "html";
+                        }
+                        return {html: labelType=="html", label: label};
+                },
+                
+                doHighlight:function(/*String*/label){
+                        // summary:
+                        //              Highlights the string entered by the user in the menu, by default this
+                        //              highlights the first occurence found. Override this method
+                        //              to implement your custom highlighing.
+                        var rx = new RegExp("("+this._lastInput+")", "i");
+                        return label.replace(rx, '<span class="dijitComboBoxHighlightMatch">$1</span>');
                 },
 
@@ -653 +674 @@
         "dijit.form._ComboBoxMenu",
         [dijit._Widget, dijit._Templated],
-
         {
                 //      summary:

dijit/trunk/tests/form/test_ComboBox.html

@@ -205 +205 @@
         </div>
         <hr>
-        <p>ComboBox #4: url, autoComplete=false required=true:</p>
+        <p>ComboBox #4: url, autoComplete=false required=true and highlightMatch=false</p>
         <label for="combobox4">US State test 4: </label>
         <input dojoType="dijit.form.ComboBox"
@@ -218 +218 @@
                         id="combobox4"
                         required="true"
+                        highlightMatch="false"
         >
         <span>Value: <input id="value4" disabled></span>

dijit/trunk/themes/nihilo/form/Common.css

@@ -81 +81 @@
         background: transparent url('../images/warning.png') no-repeat center center;
 }
+
+/* The highlight is shown in the ComboBox menu. */
+.nihilo .dijitComboBoxHighlightMatch {
+        background-color:#d3d3d3;
+}

dijit/trunk/themes/soria/form/Common.css

@@ -81 +81 @@
         background: transparent url('../images/warning.png') no-repeat center center;
 }
+
+/* The highlight is shown in the ComboBox menu. */
+.soria .dijitComboBoxHighlightMatch {
+        background-color:#f9f7ba;
+}

dijit/trunk/themes/tundra/form/Common.css

@@ -125 +125 @@
         background: url("../images/validationInputBg.gif") repeat-x top left #fff;
 }
+
+/* The highlight is shown in the ComboBox menu. */
+.tundra .dijitComboBoxHighlightMatch {
+        background-color:#a5beda;
+}