stylize as CSS classes, remove config inline styles.

examples/13_autocomplete_advanced.html

@@ -37,7 +37,7 @@
       modes: ['text', 'tree'],
       autocomplete: {
           config: {
-              ConfirmKeys: [39, 35, 9, 190] // Confirm Autocomplete Keys: [right, end, tab, '.']  // By default are only [right, end, tab]
+              confirmKeys: [39, 35, 9, 190] // Confirm Autocomplete Keys: [right, end, tab, '.']  // By default are only [right, end, tab]
           },
           activationChar: '*', // ActivationChar indicate if the value starts with this Char then autocompletion will be activated. ('' will be ignored).
           applyTo:['value'],

gulpfile.js

@@ -130,7 +130,8 @@ gulp.task('bundle-css', ['mkdir'], function () {
     'src/css/jsoneditor.css',
     'src/css/contextmenu.css',
     'src/css/menu.css',
-    'src/css/searchbox.css'
+    'src/css/searchbox.css',
+    'src/css/autocomplete.css'
   ])
       .pipe(concatCss(NAME + '.css'))
       .pipe(gulp.dest(DIST))

src/css/autocomplete.css

@@ -0,0 +1,31 @@
+
+div.jsoneditor div.autocomplete.dropdown {
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #aaa;
+    z-index: 100;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    cursor: default;
+    margin: 0;
+    padding-left: 2pt;
+    padding-right: 10pt;
+    text-align: left;
+    outline: 0;
+    font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif;
+    font-size: 10pt;
+}
+
+div.jsoneditor div.autocomplete.dropdown .item {
+    color: #333;
+}
+
+div.jsoneditor div.autocomplete.dropdown .item.hover {
+    background-color: #ddd;
+}
+
+div.jsoneditor div.autocomplete.hint {
+    color: #aaa;
+    top:4px;
+    left:4px;
+}

src/js/autocomplete.js

@@ -26,16 +26,10 @@ if (!String.prototype.startsWith) {
 
 function completely(config) {
     config = config || {};
-    config.ConfirmKeys = config.ConfirmKeys || [39, 35, 9] // right, end, tab 
+    config.confirmKeys = config.confirmKeys || [39, 35, 9] // right, end, tab 
-    config.fontSize = config.fontSize || '';
+
-    config.fontFamily = config.fontFamily || '';
+    var fontSize = '';
-    config.promptInnerHTML = config.promptInnerHTML || '';
+    var fontFamily = '';    
-    config.color = config.color || '#333';
-    config.hintColor = config.hintColor || '#aaa';
-    config.backgroundColor = config.backgroundColor || '#fff';
-    config.dropDownBorderColor = config.dropDownBorderColor || '#aaa';
-    config.dropDownZIndex = config.dropDownZIndex || '100'; // to ensure we are in front of everybody
-    config.dropDownOnHoverBackgroundColor = config.dropDownOnHoverBackgroundColor || '#ddd';
 
     var wrapper = document.createElement('div');
     wrapper.style.position = 'relative';
@@ -45,25 +39,9 @@ function completely(config) {
     wrapper.style.padding = '0';
 
     var dropDown = document.createElement('div');
+    dropDown.className = 'autocomplete dropdown';
     dropDown.style.position = 'absolute';
     dropDown.style.visibility = 'hidden';
-    dropDown.style.outline = '0';
-    dropDown.style.margin = '0';
-    dropDown.style.paddingLeft = '2pt';
-    dropDown.style.paddingRight = '10pt';
-    dropDown.style.textAlign = 'left';
-    dropDown.style.fontSize = config.fontSize;
-    dropDown.style.fontFamily = config.fontFamily;
-    dropDown.style.backgroundColor = config.backgroundColor;
-    dropDown.style.zIndex = config.dropDownZIndex;
-    dropDown.style.cursor = 'default';
-    dropDown.style.borderStyle = 'solid';
-    dropDown.style.borderWidth = '1px';
-    dropDown.style.borderColor = config.dropDownBorderColor;
-    dropDown.style.overflowX = 'hidden';
-    dropDown.style.whiteSpace = 'pre';
-    dropDown.style.overflowY = 'scroll';  // note: this might be ugly when the scrollbar is not required. however in this way the width of the dropDown takes into account
-
 
     var spacer;
     var leftSide; // <-- it will contain the leftSide part of the textfield (the bit that was already autocompleted)
@@ -95,7 +73,8 @@ function completely(config) {
                 for (var i = 0; i < array.length; i++) {
                     if (array[i].indexOf(token) !== 0) { continue; }
                     var divRow = document.createElement('div');
-                    divRow.style.color = config.color;
+                    divRow.className = 'item';
+                    //divRow.style.color = config.color;
                     divRow.onmouseover = onMouseOver;
                     divRow.onmouseout = onMouseOut;
                     divRow.onmousedown = onMouseDown;
@@ -127,9 +106,9 @@ function completely(config) {
             },
             highlight: function (index) {
                 if (oldIndex != -1 && rows[oldIndex]) {
-                    rows[oldIndex].style.backgroundColor = config.backgroundColor;
+                    rows[oldIndex].className = "item";
                 }
-                rows[index].style.backgroundColor = config.dropDownOnHoverBackgroundColor; // <-- should be config
+                rows[index].className = "item hover"; 
                 oldIndex = index;
             },
             move: function (step) { // moves the selection either up or down (unless it's not possible) step is either +1 or -1.
@@ -175,8 +154,8 @@ function completely(config) {
             spacer.style.border = '0';
             spacer.style.left = '0';
             spacer.style.whiteSpace = 'pre';
-            spacer.style.fontSize = config.fontSize;
+            spacer.style.fontSize = fontSize;
-            spacer.style.fontFamily = config.fontFamily;
+            spacer.style.fontFamily = fontFamily;
             spacer.style.fontWeight = 'normal';
             document.body.appendChild(spacer);
         }
@@ -209,13 +188,11 @@ function completely(config) {
                 this.elementHint = null;
             }
             
-            if (config.fontSize == '') {
+            if (fontSize == '') {
-                config.fontSize = window.getComputedStyle(element).getPropertyValue('font-size');
+                fontSize = window.getComputedStyle(element).getPropertyValue('font-size');
-                dropDown.style.fontSize = config.fontSize;
             }
-            if (config.fontFamily == '') {
+            if (fontFamily == '') {
-                config.fontFamily = window.getComputedStyle(element).getPropertyValue('font-family');
+                fontFamily = window.getComputedStyle(element).getPropertyValue('font-family');
-                dropDown.style.fontFamily = config.fontFamily;
             }
             
             var w = element.getBoundingClientRect().right - element.getBoundingClientRect().left;
@@ -238,15 +215,14 @@ function completely(config) {
             this.element.style.backgroundColor = 'transparent';
             this.element.style.borderColor = 'transparent';
 
-
             this.elementHint = element.cloneNode();
+            this.elementHint.className = 'autocomplete hint';
             this.elementHint.style.zIndex = 2;
             this.elementHint.style.position = 'absolute';
-            this.elementHint.style.top = '0';
-            this.elementHint.style.left = '0';
-            this.elementHint.style.color = config.hintColor;
             this.elementHint.onfocus = function () { this.element.focus(); }.bind(this);
 
+
+
             if (this.element.addEventListener) {
                 this.element.removeEventListener("keydown", keyDownHandler);
                 this.element.addEventListener("keydown", keyDownHandler, false);
@@ -329,8 +305,8 @@ function completely(config) {
             e.stopPropagation();
             return;
         }
-        config.ConfirmKeys
+
-        if (config.ConfirmKeys.indexOf(keyCode) >= 0) { //  (autocomplete triggered)
+        if (config.confirmKeys.indexOf(keyCode) >= 0) { //  (autocomplete triggered)
             if (keyCode == 9) {                 
                 if (this.elementHint.innerText.length == 0) {
                     rs.onTab(); 
@@ -395,7 +371,7 @@ function completely(config) {
     }.bind(rs);
 
     var onBlurHandler = function (e) {
-        rs.hideDropDown();
+        //rs.hideDropDown();
         //console.log("Lost focus.");
     }.bind(rs);