code: function Completer(options, components) {
    this.requisition = components.requisition;
    this.scratchpad = options.scratchpad;
    this.input = { typed: '', cursor: { start: 0, end: 0 } };
    this.choice = 0;
  
    this.element = components.element;
    this.element.classList.add('gcli-in-complete');
    this.element.setAttribute('tabindex', '-1');
    this.element.setAttribute('aria-live', 'polite');
  
    this.document = this.element.ownerDocument;
  
    this.inputter = components.inputter;
  
    this.inputter.onInputChange.add(this.update, this);
    this.inputter.onAssignmentChange.add(this.update, this);
    this.inputter.onChoiceChange.add(this.update, this);
  
    this.autoResize = components.autoResize;
    if (this.autoResize) {
      this.inputter.onResize.add(this.resized, this);
  
      var dimensions = this.inputter.getDimensions();
      if (dimensions) {
        this.resized(dimensions);
      }
    }
  
    this.template = util.toDom(this.document, completerHtml);
    // We want the spans to line up without the spaces in the template
    util.removeWhitespace(this.template, true);
  
    this.update();
  }
docs: Completer is an 'input-like' element that sits  an input element annotating
  it with visual goodness.
  @param options Object containing user customization properties, including:
  - scratchpad (default=none) A way to move JS content to custom JS editor
  @param components Object that links to other UI components. GCLI provided:
  - requisition: A GCLI Requisition object whose state is monitored
  - element: Element to use as root
  - autoResize: (default=false): Should we attempt to sync the dimensions of
  the complete element with the input element.