From 93172dbc7017a1374be84145a9af47143f0dd915 Mon Sep 17 00:00:00 2001
From: Nisarg Jhaveri <nisargjhaveri@gmail.com>
Date: Fri, 8 May 2015 23:57:04 +0530
Subject: [PATCH] Show hint for column autocomplete in better way

Separate column name and extra information in better way in
autocomplete

Signed-off-by: Nisarg Jhaveri <nisargjhaveri@gmail.com>
---
 js/functions.js                        | 17 +++++++++++++++--
 themes/pmahomme/css/codemirror.css.php | 11 +++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/js/functions.js b/js/functions.js
index 4330eea786..e47389d280 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -1763,6 +1763,16 @@ function codemirrorAutocompleteOnInputRead(instance) {
                 'server': PMA_commonParams.get('server'),
                 'db': PMA_commonParams.get('db')
             };
+
+            var columnHintRender = function(elem, self, data) {
+                $('<div class="autocomplete-column-name">')
+                    .text(data.columnName)
+                    .appendTo(elem);
+                $('<div class="autocomplete-column-hint">')
+                    .text(data.columnHint)
+                    .appendTo(elem);
+            }
+
             $.ajax({
                 type: 'POST',
                 url: href,
@@ -1781,7 +1791,7 @@ function codemirrorAutocompleteOnInputRead(instance) {
                                 };
                                 for (var column in columns) {
                                     if (columns.hasOwnProperty(column)) {
-                                        var displayText = column + ' | ' + columns[column].Type;
+                                        var displayText = columns[column].Type;
                                         if (columns[column].Key == 'PRI') {
                                             displayText += ' | Primary';
                                         } else if (columns[column].Key == 'UNI') {
@@ -1789,7 +1799,10 @@ function codemirrorAutocompleteOnInputRead(instance) {
                                         }
                                         table.columns.push({
                                             text: column,
-                                            displayText: displayText
+                                            displayText: column + " | " +  displayText,
+                                            columnName: column,
+                                            columnHint: displayText,
+                                            render: columnHintRender
                                         });
                                     }
                                 }
diff --git a/themes/pmahomme/css/codemirror.css.php b/themes/pmahomme/css/codemirror.css.php
index f2117a8ca5..909c6cf631 100644
--- a/themes/pmahomme/css/codemirror.css.php
+++ b/themes/pmahomme/css/codemirror.css.php
@@ -309,6 +309,17 @@ span.cm-number {
     color: teal;
 }
 
+.autocomplete-column-name {
+    display: inline-block;
+}
+
+.autocomplete-column-hint {
+    display: inline-block;
+    float: right;
+    color: #666;
+    margin-left: 1em;
+}
+
 /* CodeMirror Hints styling */
 .CodeMirror-hints {
   position: absolute;