Add a custom dropdown menu to a searchbox

// SearchboxDropdown.ts

import {
  Component,
  Initialization,
  LazyInitialization,
  ComponentOptions,
  IComponentBindings,
  IComponentDefinition,
  Utils,
  load,
  $$
} from 'coveo-search-ui';

import {
  ISearchboxDropdownItemOptions,
  SearchboxDropdownItem
} from './SearchboxDropdownItem';

export interface ISearchboxDropdownOptions {}

export class SearchboxDropdown extends Component {

  static ID = 'SearchboxDropdown';

  static options: ISearchboxDropdownOptions = {};

  private selectedItem: SearchboxDropdownItem = null;
  public itemList: HTMLElement = null;

  constructor(public element: HTMLElement, public options: ISearchboxDropdownOptions,
              public bindings?: IComponentBindings) {
    super(element, SearchboxDropdown.ID, bindings);
    this.options = ComponentOptions.initComponentOptions(element, SearchboxDropdown,
                                                         options);

    //...

    this.renderComponent();
  };

  /**
   * Adds a SearchboxDropdownItem to the dropdown menu.
   * @param options The options to apply to the new item.
   */
  public addItem(options: ISearchboxDropdownItemOptions) {
    let newHTMLElement = $$('div', {class: 'SearchboxDropdownItem'}).el;
    this.element.appendChild(newHTMLElement);
    let item = new SearchboxDropdownItem(newHTMLElement, options);
  };

  private renderSelectedItem() {
    let renderedSelectedItem = $$(this.element).findClass(
                               'coveo-custom-searchbox-dropdown-selected')[0];
    if (!Utils.isNullOrUndefined(renderedSelectedItem)) {
      renderedSelectedItem.remove();
    }

    let selectedItem = $$('span', {class: 'coveo-custom-searchbox-dropdown-selected'},
                           this.selectedItem.options.caption +
                           '<i class="fa fa-chevron-down"></i>').el;
    /**
     * To make the chevron appear, include Font Awesome
     * (see https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css).
     * Alternatively, you could also include your own image.
     */

    this.element.appendChild(selectedItem);
  }

  /**
   * Selects a SearchboxDropdownItem.
   * @param item The item to select.
   */
  public selectItem(item: SearchboxDropdownItem) {
    this.selectedItem = item;
    this.renderSelectedItem();
  }

  /**
   * Toggles the SearchboxDropDown menu
   */
  public toggle() {
    $$(this.element).toggleClass('active');
  };

  private handleClick() {
    this.toggle();
  };

  private renderComponent() {
    this.itemList = $$('ul', {class: 'coveo-custom-searchbox-dropdown-content'}).el;
    this.element.appendChild(this.itemList);

    $$(this.element).addClass('coveo-custom-searchbox-dropdown');
    $$(this.element).on('click', () => this.handleClick());

    let that = this;
    document.onclick = function (this, event: MouseEvent) {
      if (!$$(<HTMLElement>event.toElement).closest(
          'coveo-custom-searchbox-dropdown')) {
        if ($$(that.element).hasClass('active')) {
          $$(that.element).toggleClass('active', false);
        }
      }
    };
  };
};

export function lazySearchboxDropdown() {
  return load<IComponentDefinition>('Searchbox').then((Searchbox) => {
    Initialization.registerAutoCreateComponent(SearchboxDropdown);
    return SearchboxDropdown;
  });
};

// Register the 'SearchboxDropdown' lazy component using
// the previously defined function.
LazyInitialization.registerLazyComponent('SearchboxDropdown',
                                         lazySearchboxDropdown);

// SearchboxDropdownItem.ts

import {
  Component,
  Initialization,
  LazyInitialization,
  ComponentOptions,
  IComponentBindings,
  IComponentDefinition,
  get,
  load,
  $$
} from 'coveo-search-ui';

import {
  SearchboxDropdown
} from './SearchboxDropdown';

export interface ISearchboxDropdownItemOptions {
  caption: string;
  target?: string;
  default?: boolean;
  position?: string;
}

export class SearchboxDropdownItem extends Component {
  static ID = 'SearchboxDropdownItem';

  /**
   * The options for the component.
   * @componentOptions
   */
  static options: ISearchboxDropdownItemOptions = {

    /**
     * Specifies the caption to be displayed on the component.
     */
    caption: ComponentOptions.buildStringOption({defaultValue: ''}),

    /**
     * Specifies the target of the component. To be used in your
     * implementation, for example, in the toggle() function below.
     */
    target: ComponentOptions.buildStringOption({defaultValue: ''}),

    /**
     * Specifies whether the component is displayed when the search
     * page first loads.
     */
    default: ComponentOptions.buildBooleanOption({defaultValue: false}),

    /**
     * Specifies the position of the component.
     */
    position: ComponentOptions.buildStringOption({defaultValue: ''})
  };

  private searchboxDropdown: SearchboxDropdown = null;

  constructor(public element: HTMLElement,
              public options: ISearchboxDropdownItemOptions,
              public bindings?: IComponentBindings) {
    super(element, SearchboxDropdownItem.ID, bindings);
    this.options = ComponentOptions.initComponentOptions(
                      element, SearchboxDropdownItem, options);

    //...

    this.renderComponent();
  };

   /**
   * Toggles the selected item.
   */
  public toggle() {
    this.searchboxDropdown.selectItem(this);

    // This is most likely where you would include code to
    // affect the query, probably using this.options.target

  }

  private handleClick() {
    this.toggle();
  };

  private renderComponent() {
    this.searchboxDropdown = <SearchboxDropdown>get(this.element.parentElement);
    let link = $$('a', {}, this.options.caption).el;
    let item = $$('li', {class: this.options.position}, '', link).el;

    $$(link).on('click', () => this.handleClick());

    if (this.options.default) {
      this.searchboxDropdown.selectItem(this);
    }
    this.searchboxDropdown.itemList.appendChild(item);
  };
};

export function lazySearchboxDropdownItem() {
  return load<IComponentDefinition>('SearchboxDropdown').then(
                                            (SearchboxDropdown) => {
    Initialization.registerAutoCreateComponent(SearchboxDropdownItem);
    return SearchboxDropdownItem;
  });
};

// Register the 'SearchboxDropdownItem' lazy component using
// the previously defined function.
LazyInitialization.registerLazyComponent('SearchboxDropdownItem',
                                         lazySearchboxDropdownItem);