vue-autocomplete.vue

<template>
  <div :class="`${getClassName('wrapper')} autocomplete-wrapper`">
    <input ref="input"
           type="text"
           :id="id"
           :class="`${getClassName('input')} autocomplete-input`"
           :placeholder="placeholder"
           :name="name"
           v-model="type"
           @input="handleInput"
           @dblclick="handleDoubleClick"
           @blur="handleBlur"
           @keydown="handleKeyDown"
           @focus="handleFocus"
           autocomplete="off" />

    <div :class="`${getClassName('list')} autocomplete autocomplete-list`"
         ref="autocomplete-list"
         v-show="showList && json.length">
      <ul :style="{'max-height': maxHeight}">
        <li v-for="(data, i) in json"
            ref="autocomplete-list-items"
            :class="activeClass(i)">
          <a href="#"
             @click.prevent="selectList(data)"
             @mousemove="mousemove(i)">
            <div v-if="onShouldRenderChild"
                 v-html="onShouldRenderChild(data)"></div>
            <div v-if="!onShouldRenderChild">
              <b class="autocomplete-anchor-text">{{ deepValue(data, anchor) }}</b>
              <span class="autocomplete-anchor-label">{{ deepValue(data, label) }}</span>
            </div>
          </a>
        </li>
      </ul>

    </div>

  </div>
</template>


<script>

  /*! Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal)
  * Licensed Under MIT (http://opensource.org/licenses/MIT)
  *
  * Vue 2 Autocomplete @ Version 0.0.1
  *
  */

export default {
  props: {
    id: String,
    name: String,
    className: String,
    classes: {
      type: Object,
      default: () => ({
        wrapper: false,
        input: false,
        list: false,
        item: false
      })
    },
    placeholder: String,
    required: Boolean,

    // Intial Value
    initValue: {
      type: String,
      default: ""
    },

    // Manual List
    options: Array,

    // Filter After Get the data
    filterByAnchor: {
      type: Boolean,
      default: true
    },

    // Anchor of list
    anchor: {
      type: String,
      required: true
    },

    // Label of list
    label: String,

    // Max height of drop down list
    maxHeight: String,

    // Debounce time
    debounce: Number,

    // ajax URL will be fetched
    url: {
      type: String,
      required: true
    },

    // query param
    param: {
      type: String,
      default: "q"
    },

    encodeParams: {
      type: Boolean,
      default: true
    },

    // Custom Params
    customParams: Object,

    // Custom Headers
    customHeaders: Object,

    // minimum length
    min: {
      type: Number,
      default: 0
    },

    // Create a custom template from data.
    onShouldRenderChild: Function,

    // Process the result before retrieveng the result array.
    process: Function,

    // Callback
    onInput: Function,
    onShow: Function,
    onBlur: Function,
    onHide: Function,
    onFocus: Function,
    onSelect: Function,
    onBeforeAjax: Function,
    onAjaxProgress: Function,
    onAjaxLoaded: Function,
    onShouldGetData: Function
  },

  data() {
    return {
      showList: false,
      type: "",
      json: [],
      focusList: "",
      debounceTask: undefined
    };
  },

  watch: {
    options(newVal, oldVal) {
      if (this.filterByAnchor) {
        const { type, anchor } = this;
        const regex = new RegExp(`${type}`, "i");
        const filtered = newVal.filter(item => {
          const found = item[anchor].search(regex) !== -1;
          return found;
        });
        this.json = filtered;
      } else {
        this.json = newVal;
      }
    }
  },

  methods: {
    getClassName(part) {
      const { classes, className } = this;
      if (classes[part]) return `${classes[part]}`;
      return className ? `${className}-${part}` : "";
    },

    // Netralize Autocomplete
    clearInput() {
      this.showList = false;
      this.type = "";
      this.json = [];
      this.focusList = "";
    },

    // Get the original data
    cleanUp(data) {
      return JSON.parse(JSON.stringify(data));
    },

    /*==============================
        INPUT EVENTS
      =============================*/
    handleInput(e) {
      const { value } = e.target;
      this.showList = true;
      // Callback Event
      if (this.onInput) this.onInput(value);
      // If Debounce
      if (this.debounce) {
        if (this.debounceTask !== undefined) clearTimeout(this.debounceTask);
        this.debounceTask = setTimeout(() => {
          return this.getData(value);
        }, this.debounce);
      } else {
        return this.getData(value);
      }
    },

    itemView(item) {
      if (item && item.scrollIntoView) {
        item.scrollIntoView(false);
      }
    },

    handleKeyDown(e) {
      let key = e.keyCode;

      // Disable when list isn't showing up
      if (!this.showList) return;

      // Key List
      const DOWN = 40;
      const UP = 38;
      const ENTER = 13;
      const ESC = 27;

      // Prevent Default for Prevent Cursor Move & Form Submit
      switch (key) {
        case DOWN:
          e.preventDefault();
          this.focusList++;
          this.itemView(this.$refs['autocomplete-list-items'][this.focusList]);
          break;
        case UP:
          e.preventDefault();
          this.itemView(this.$refs['autocomplete-list-items'][this.focusList]);
          this.focusList--;
          break;
        case ENTER:
          e.preventDefault();
          this.selectList(this.json[this.focusList]);
          this.type = '';
          this.showList = false;
          break;
        case ESC:
          this.showList = false;
          break;
      }

      const listLength = this.json.length - 1;
      const outOfRangeBottom = this.focusList > listLength;
      const outOfRangeTop = this.focusList < 0;
      const topItemIndex = 0;
      const bottomItemIndex = listLength;

      let nextFocusList = this.focusList;
      if (outOfRangeBottom) nextFocusList = topItemIndex;
      if (outOfRangeTop) nextFocusList = bottomItemIndex;
      this.focusList = nextFocusList;
    },

    setValue(val) {
      this.type = val;
    },

    /*==============================
        LIST EVENTS
      =============================*/

    handleDoubleClick() {
      this.json = [];
      this.getData("");
      // Callback Event
      this.onShow ? this.onShow() : null;
      this.showList = true;
    },

    handleBlur(e) {
      // Callback Event
      this.onBlur ? this.onBlur(e) : null;
      setTimeout(() => {
        // Callback Event
        this.onHide ? this.onHide() : null;
        this.showList = false;
      }, 250);
    },

    handleFocus(e) {
      this.focusList = 0;
      // Callback Event
      this.onFocus ? this.onFocus(e) : null;
    },

    mousemove(i) {
      this.focusList = i;
    },

    activeClass(i) {
      const focusClass = i === this.focusList ? "focus-list" : "";
      const userClass = `${this.getClassName('item')}`;
      return focusClass ? `${focusClass} ${userClass}` : `${userClass}`;
    },

    selectList(data) {
      // Deep clone of the original object
      const clean = this.cleanUp(data);
      // Put the selected data to type (model)
      this.type = clean[this.anchor];
      // Hide List
      this.showList = false;
      // Callback Event
      this.onSelect ? this.onSelect(clean) : null;
    },

    deepValue(obj, path) {
      const arrayPath = path.split(".");
      for (var i = 0; i < arrayPath.length; i++) {
        obj = obj[arrayPath[i]];
      }
      return obj;
    },

    /*==============================
        AJAX EVENTS
      =============================*/

    composeParams(val) {
      const encode = val => (this.encodeParams ? encodeURIComponent(val) : val);
      let params = `${this.param}=${encode(val)}`;
      if (this.customParams) {
        Object.keys(this.customParams).forEach(key => {
          params += `&${key}=${encode(this.customParams[key])}`;
        });
      }
      return params;
    },

    composeHeader(ajax) {
      if (this.customHeaders) {
        Object.keys(this.customHeaders).forEach(key => {
          ajax.setRequestHeader(key, this.customHeaders[key]);
        });
      }
    },

    doAjax(val) {
      // Callback Event
      this.onBeforeAjax ? this.onBeforeAjax(val) : null;
      // Compose Params
      let params = this.composeParams(val);
      // Init Ajax
      let ajax = new XMLHttpRequest();
      ajax.open("GET", `${this.url}?${params}`, true);
      this.composeHeader(ajax);
      // Callback Event
      ajax.addEventListener("progress", data => {
        if (data.lengthComputable && this.onAjaxProgress)
          this.onAjaxProgress(data);
      });
      // On Done
      ajax.addEventListener("loadend", e => {
        const { responseText } = e.target;
        let json = JSON.parse(responseText);
        // Callback Event
        this.onAjaxLoaded ? this.onAjaxLoaded(json) : null;
        this.json = this.process ? this.process(json) : json;
      });
      // Send Ajax
      ajax.send();
    },

    getData(value) {
      if (value.length < this.min || !this.url) return;
      if (this.onShouldGetData) this.manualGetData(value);
      else this.doAjax(value);
    },

    // Do Ajax Manually, so user can do whatever he want
    manualGetData(val) {
      const task = this.onShouldGetData(val);
      if (task && task.then) {
        return task.then(options => {
          this.json = options;
        });
      }
    }
  },

  created() {
    console.log(this.maxHeight);
    // Sync parent model with initValue Props
    this.type = this.initValue ? this.initValue : null;
  },

  mounted() {
    if (this.required) this.$refs.input.setAttribute("required", this.required);
  }
};
</script>