autocomplete.js

// import { isTouchEnable } from '../es6/functions.js';

/** Display autocomplete component on searches */

var Autocomplete = function(settings) {
  this.settings = {
    element: settings.element,
  }

  this.init();
}

Autocomplete.prototype.init = function init() {
  if (!this.settings.element) {
    return
  }

  this.setElements();
  this.addEvents();
}

Autocomplete.prototype.destroy = function destroy() {
  this.removeEvents();
}

Autocomplete.prototype.setElements = function setElements() {
  const listSuggestsSelector = this.settings.element.getAttribute('aria-owns');

  this.elements = {
    listSuggests: document.querySelector(`#${listSuggestsSelector}`)
  }
}

Autocomplete.prototype.addEvents() {
  this._listeners = {
    onFocusInput: e => this.onFocusInput(e)
    onBlurInput: e => this.onBlurInput(e)
    onKeypressInput: e => this.onKeypressInput(e)
  }

  this.settings.element.addEventListener('focus', this._listeners.onFocusInput)
  this.settings.element.addEventListener('blur', this._listeners.onBlurInput)
  this.settings.element.addEventListener('keydown', this._listeners.onKeypressInput)
}

Autocomplete.prototype.removeEvents() {
  this.settings.element.removeEventListener('focus', this._listeners.onFocusInput)
  this.settings.element.removeEventListener('blur', this._listeners.onBlurInput)
  this.settings.element.removeEventListener('keydown', this._listeners.onKeypressInput)

}

Autocomplete.prototype.onFocusInput = function onFocusInput() {
  document.body.setAttribute("data-autocomplete-has-focus", true)
}

Autocomplete.prototype.onBlurInput = function onBlurInput() {
  document.body.setAttribute("data-autocomplete-has-focus", false)
}

Autocomplete.prototype.onKeypressInput = function onKeypressInput(event) {
  const keyCode = event.keyCode;

  switch (keyCode) {
    case 40:
      event.preventDefault()
      const currentSelected = this.elements.listSuggests.querySelector(`[aria-selected="true"]`)
      const nextSelected = currentSelected.nextElementSibling
      currentSelected.setAttribute("aria-selected", false)
      nextSelected.setAttribute("aria-selected", true)

    case 38:
      event.preventDefault()
      break;
    default:
  }
}

export default Autocomplete;