Improved design and typeMap is an optional parameter.

packages/completer/src/model.ts

@@ -208,15 +208,16 @@ class CompleterModel implements Completer.IModel {
   /**
    * Set the available options in the completer menu.
    */
-  setOptions(newValue: IterableOrArrayLike<string>, typeMap: JSONObject) {
+  setOptions(newValue: IterableOrArrayLike<string>, typeMap?: JSONObject) {
     const values = toArray(newValue || []);
-    if (JSONExt.deepEqual(values, this._options) && JSONExt.deepEqual(typeMap, this._typeMap)) {
+    const types = typeMap || {};
+    if (JSONExt.deepEqual(values, this._options) && JSONExt.deepEqual(types, this._typeMap)) {
       return;
     }
     if (values.length) {
       this._options = values;
-      this._typeMap = typeMap;
-      this._orderedTypes = Private.findOrderedTypes(typeMap);
+      this._typeMap = types;
+      this._orderedTypes = Private.findOrderedTypes(types);
       this._subsetMatch = true;
     } else {
       this._options = [];

packages/completer/src/widget.ts

@@ -594,7 +594,7 @@ namespace Completer {
     /**
      * Set the available options in the completer menu.
      */
-    setOptions(options: IterableOrArrayLike<string>, typeMap: JSONObject): void;
+    setOptions(options: IterableOrArrayLike<string>, typeMap?: JSONObject): void;
 
     /**
      * Handle a cursor change.
@@ -714,11 +714,16 @@ namespace Completer {
         let colorIndex: number = orderedTypes.indexOf(type) + 1;
         typeNode.className = 'jp-Completer-type';
         typeNode.setAttribute(`data-color-index`, colorIndex.toString());
-        li.appendChild(typeNode);
         li.title = type;
+        let typeExtendedNode = document.createElement('code');
+        typeExtendedNode.className = 'jp-Completer-typeExtended';
+        typeExtendedNode.textContent = type.toLocaleLowerCase();
+        li.appendChild(typeNode);
+        li.appendChild(matchNode);
+        li.appendChild(typeExtendedNode);
+      } else {
+        li.appendChild(matchNode);
       }
-
-      li.appendChild(matchNode);
       return li;
     }
   }

packages/completer/style/index.css

@@ -64,6 +64,20 @@
 }
 
 
+.jp-Completer-item .jp-Completer-typeExtended {
+  display: table-cell;
+  box-sizing: border-box;
+  height: var(--jp-private-completer-item-height);
+  text-align: right;
+  background: transparent;
+  color: var(--jp-ui-font-color2);
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+  line-height: var(--jp-private-completer-item-height);
+  padding-right: 8px;
+}
+
+
 .jp-Completer-item:hover {
   background: var(--jp-layout-color2);
   opacity: 0.8;

test/src/completer/model.spec.ts

@@ -53,7 +53,7 @@ describe('completer/model', () => {
         let listener = (sender: any, args: void) => { called++; };
         model.stateChanged.connect(listener);
         expect(called).to.be(0);
-        model.setOptions(['foo'], {});
+        model.setOptions(['foo']);
         expect(called).to.be(1);
         model.setOptions(['foo'], {foo: 'instance'});
         expect(called).to.be(2);
@@ -65,8 +65,8 @@ describe('completer/model', () => {
         let listener = (sender: any, args: void) => { called++; };
         model.stateChanged.connect(listener);
         expect(called).to.be(0);
-        model.setOptions(['foo'], {});
-        model.setOptions(['foo'], {});
+        model.setOptions(['foo']);
+        model.setOptions(['foo']);
         expect(called).to.be(1);
         model.setOptions(['foo'], {foo: 'instance'});
         model.setOptions(['foo'], {foo: 'instance'});
@@ -155,7 +155,7 @@ describe('completer/model', () => {
           { raw: 'bar', text: 'bar' },
           { raw: 'baz', text: 'baz' }
         ];
-        model.setOptions(['foo', 'bar', 'baz'], {});
+        model.setOptions(['foo', 'bar', 'baz']);
         expect(toArray(model.items())).to.eql(want);
       });
 
@@ -164,7 +164,7 @@ describe('completer/model', () => {
         let want: Completer.IItem[] = [
           { raw: 'foo', text: '<mark>f</mark>oo' }
         ];
-        model.setOptions(['foo', 'bar', 'baz'], {});
+        model.setOptions(['foo', 'bar', 'baz']);
         model.query = 'f';
         expect(toArray(model.items())).to.eql(want);
       });
@@ -175,7 +175,7 @@ describe('completer/model', () => {
           { raw: 'qux', text: '<mark>qux</mark>' },
           { raw: 'quux', text: '<mark>qu</mark>u<mark>x</mark>' }
         ];
-        model.setOptions(['foo', 'bar', 'baz', 'quux', 'qux'], {});
+        model.setOptions(['foo', 'bar', 'baz', 'quux', 'qux']);
         model.query = 'qux';
         expect(toArray(model.items())).to.eql(want);
       });
@@ -186,7 +186,7 @@ describe('completer/model', () => {
           { raw: 'quux', text: '<mark>qu</mark>ux' },
           { raw: 'qux', text: '<mark>qu</mark>x' }
         ];
-        model.setOptions(['foo', 'bar', 'baz', 'qux', 'quux'], {});
+        model.setOptions(['foo', 'bar', 'baz', 'qux', 'quux']);
         model.query = 'qu';
         expect(toArray(model.items())).to.eql(want);
       });

test/src/completer/widget.spec.ts

@@ -107,7 +107,7 @@ describe('completer/widget', () => {
           model: new CompleterModel(),
           renderer: new CustomRenderer()
         };
-        options.model.setOptions(['foo', 'bar'], {});
+        options.model.setOptions(['foo', 'bar']);
 
         let widget = new Completer(options);
         expect(widget).to.be.a(Completer);
@@ -130,7 +130,7 @@ describe('completer/widget', () => {
         };
         let value = '';
         let listener = (sender: any, selected: string) => { value = selected; };
-        options.model.setOptions(['foo', 'bar'], {});
+        options.model.setOptions(['foo', 'bar']);
         Widget.attach(anchor, document.body);
 
         let widget = new Completer(options);
@@ -181,7 +181,7 @@ describe('completer/widget', () => {
 
           model.original = request;
           model.cursor = { start: 0, end: 1 };
-          model.setOptions(['abc', 'abd', 'abe', 'abi'], {});
+          model.setOptions(['abc', 'abd', 'abe', 'abi']);
 
           let widget = new Completer({ model, editor: code.editor });
           widget.hide();
@@ -495,7 +495,7 @@ describe('completer/widget', () => {
           let listener = (sender: any, selected: string) => {
             value = selected;
           };
-          model.setOptions(['foo', 'bar'], {});
+          model.setOptions(['foo', 'bar']);
           Widget.attach(anchor, document.body);
 
           let widget = new Completer(options);
@@ -520,7 +520,7 @@ describe('completer/widget', () => {
           let listener = (sender: any, selected: string) => {
             value = selected;
           };
-          model.setOptions(['foo', 'bar'], {});
+          model.setOptions(['foo', 'bar']);
           Widget.attach(anchor, document.body);
 
           let widget = new Completer(options);
@@ -544,7 +544,7 @@ describe('completer/widget', () => {
           let listener = (sender: any, selected: string) => {
             // no op
           };
-          model.setOptions(['foo', 'bar'], {});
+          model.setOptions(['foo', 'bar']);
           Widget.attach(anchor, document.body);
 
           let widget = new Completer(options);
@@ -605,7 +605,7 @@ describe('completer/widget', () => {
 
           model.original = request;
           model.cursor = { start: text.length - 1, end: text.length };
-          model.setOptions(['abc', 'abd', 'abe', 'abi'], {});
+          model.setOptions(['abc', 'abd', 'abe', 'abi']);
 
           let widget = new Completer({ model, editor: code.editor });
           Widget.attach(widget, document.body);
@@ -650,7 +650,7 @@ describe('completer/widget', () => {
 
         Widget.attach(anchor, document.body);
         model.original = request;
-        model.setOptions(['foo'], {});
+        model.setOptions(['foo']);
 
         let widget = new Completer(options);
         widget.selected.connect(listener);
@@ -688,7 +688,7 @@ describe('completer/widget', () => {
 
         Widget.attach(anchor, document.body);
         model.original = request;
-        model.setOptions(['foo', 'bar', 'baz'], {});
+        model.setOptions(['foo', 'bar', 'baz']);
 
         let widget = new Completer(options);
         widget.hide();