標籤輸入框 - Tag Inputs

1
2
<p>Valid keywords are: apple, lemon, love</p>
<div data-tag-input class="tag-input"></div>

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
export default function bindTagInput() {

  const { TagInput } = window.beyond

  const fruits = ['apple', 'lemon', 'love']

  const tagInputs = Array.from(document.querySelectorAll('[data-tag-input]'))
    .map(dom => {
      const tagInput = new TagInput(dom, {
        suggest(v) {
          if (v) {
            const fruid = fruits.find(f => f.startsWith(v))
            return fruid
          }
          return ''
        },
        validate(v) {
          if (fruits.includes(v)) {
            return { isTag: true, classname: 'tag-extra' }
          }
          return { isTag: false }
        },
        change(res) {
          console.log('change', res)
        }
      })

      return tagInput
    })

  return function unbindTagInput() {
    tagInputs.forEach(input => input.destroy())
  }
}