hoppscotch/components/autocomplete.vue

<template>
  <div class="autocomplete-wrapper">
    <label>
      <slot />
      <input type="text" :placeholder="placeholder" v-model="value" @input="updateSuggestions" @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke" ref="acInput" :spellcheck="spellcheck" :autocapitalize="spellcheck" :autocorrect="spellcheck">

      <ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
        <li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }">{{ suggestion }}</li>
      </ul>
    </label>
  </div>
</template>

<style lang="scss" scoped>
  .autocomplete-wrapper {

    position: relative;

    input:focus+ul.suggestions,
    ul.suggestions:hover {
      display: block;
    }

    ul.suggestions {
      display: none;
      background-color: var(--atc-color);
      position: absolute;
      top: 90%;
      margin: 0 4px;
      left: 0;

      padding: 0;
      border-radius: 0 0 4px 4px;
      z-index: 9999;
      transition: transform 200ms ease-out;

      li {
        width: 100%;
        display: block;
        padding: 8px 16px;
        font-weight: 700;
        font-size: 18px;
        font-family: monospace;
        white-space: pre-wrap;

        &:last-child {
          border-radius: 0 0 4px 4px;
        }

        &:hover,
        &.active {
          background-color: var(--ac-color);
          color: var(--act-color);
          cursor: pointer;
        }
      }
    }

  }

</style>

<script>
  const KEY_TAB = 9;
  const KEY_ESC = 27;

  const KEY_ARROW_UP = 38;
  const KEY_ARROW_DOWN = 40;

  export default {
    props: {
      spellcheck: {
        type: Boolean,
        default: true,
        required: false
      },

      placeholder: {
        type: String,
        default: 'Start typing...',
        required: false
      },

      source: {
        type: Array,
        required: true
      }
    },

    watch: {
      value() {
        this.$emit('input', this.value);
      }
    },

    data() {
      return {
        value: "",
        selectionStart: 0,
        suggestionsOffsetLeft: 0,
        currentSuggestionIndex: -1,
        suggestionsVisible: false
      }
    },

    methods: {
      updateSuggestions(event) {
        // Hide suggestions if ESC pressed.
        if (event.which && event.which === KEY_ESC) {
          event.preventDefault();
          this.suggestionsVisible = false;
          this.currentSuggestionIndex = -1;
          return;
        }

        // As suggestions is a reactive property, this implicitly
        // causes suggestions to update.
        this.selectionStart = this.$refs.acInput.selectionStart;
        this.suggestionsOffsetLeft = (12 * this.selectionStart);
        this.suggestionsVisible = true;
      },

      forceSuggestion(text) {
        let input = this.value.substring(0, this.selectionStart);
        this.value = input + text;

        this.selectionStart = this.value.length;
        this.suggestionsVisible = true;
        this.currentSuggestionIndex = -1;
      },

      handleKeystroke(event) {
        if (event.which === KEY_ARROW_UP) {
          event.preventDefault();

          this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0 ?
            this.currentSuggestionIndex - 1 :
            0;
        } else if (event.which === KEY_ARROW_DOWN) {
          event.preventDefault();

          this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 ?
            this.currentSuggestionIndex + 1 :
            this.suggestions.length - 1;
        }

        if (event.which === KEY_TAB) {
          event.preventDefault();

          let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
          if (activeSuggestion) {
            let input = this.value.substring(0, this.selectionStart);
            this.value = input + activeSuggestion;
          }
        }
      }
    },

    computed: {
      /**
       * Gets the suggestions list to be displayed under the input box.
       *
       * @returns {default.props.source|{type, required}}
       */
      suggestions() {
        let input = this.value.substring(0, this.selectionStart);

        return this.source.filter((entry) => {
            return entry.toLowerCase().startsWith(input.toLowerCase()) &&
              input.toLowerCase() !== entry.toLowerCase();
          })
          // Cut off the part that's already been typed.
          .map((entry) => entry.substring(this.selectionStart))
          // We only want the top 3 suggestions.
          .slice(0, 3);
      }
    },

    mounted() {
      this.updateSuggestions({
        target: this.$refs.acInput
      });
    }
  }

</script>