vue-typeahead/vue-typeahead.js at master · NoDivide/vue-typeahead · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
if (typeof require === 'function') {
  var Vue = require('vue')
}

Vue.component('typeahead', {
  props: {
    data: {
      type: Object
    },
    limit: {
      type: Number,
      default: 0
    },
    onHit: {
      type: Function,
      required: true
    },
    prepareData: {
      type: Function
    },
    src: {
      type: String,
      required: true
    },
    query: {
      type: String
    }
  },

  data: function () {
    return {
      items: [],
      query: '',
      current: 0,
      loading: false
    }
  },

  components: {
    typeaheadInput: {
      inherit: true,
      template: "<input type=\"text\" autocomplete=\"off\" v-model=\"query\" v-on=\"keydown: down|key 'down', keydown: up|key 'up', keydown: hit|key 'enter', keydown: reset|key 'esc', blur: reset, input: update\"/>"
    }
  },

  computed: {
    hasItems: function () {
      return this.items.length > 0
    },

    isEmpty: function () {
      return !this.query && !this.loading
    },

    isDirty: function () {
      return !!this.query && !this.loading
    }
  },

  methods: {
    update: function () {
      if (!this.query) {
        this.reset()
        return
      }

      this.loading = true

      this.$http.get(this.src, {q:this.query})
        .success(function (data) {
          if (this.query) {
            data = this.prepareData ? this.prepareData(data) : data
            this.items = !!this.limit ? data.slice(0, this.limit) : data
            this.current = 0
            this.loading = false
          }
        }.bind(this))
    },

    reset: function () {
      this.items = []
      this.loading = false
    },

    setActive: function (index) {
      this.current = index
    },

    isActive: function (index) {
      return this.current == index
    },

    hit: function () {
      this.onHit(this.items[this.current])
    },

    up: function () {
      if (this.current > 0) this.current--
    },

    down: function () {
      if (this.current < this.items.length-1) this.current++
    }
  }
})