自動完成 - Autocompletes

1
2
3
4
5
6
7
8
9
10
11
<pre>
  { prefix: 'SP', title: '🔥SHARE.CO🔥經典香水吊卡 ➜ 糖果茉莉, 奇蹟罌粟, 能量麝香, 甜蜜莉莉' },
  { prefix: 'SPY', title: '🔥SHARE.CO🔥經典粉絲限定 VIP 方案' },
  { prefix: 'SW', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' }
</pre>

<label class="search-input">
  <i class="icon-search"></i>
  <input class="input" type="text" data-autocomplete data-offset-left="-26"
         placeholder="search something" />
</label>

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
import noop from 'lodash.noop'

export default function bindAutocompletes() {

  const dom = document.querySelector('[data-autocomplete]')

  if (! dom) {
    return noop
  }

  const { Autocomplete } = window.beyond

  const rows = [
    { prefix: 'SP', title: '🔥SHARE.CO🔥經典香水吊卡 ➜ 糖果茉莉, 奇蹟罌粟, 能量麝香, 甜蜜莉莉' },
    { prefix: 'SPY', title: '🔥SHARE.CO🔥經典粉絲限定 VIP 方案' },
    { prefix: 'SW', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' }
  ]
  const autocomplete = new Autocomplete(dom, {

    async getData({ keyword }) {
      return rows.filter(({ prefix, title }) => {

        const upperKeyword = keyword.toUpperCase()
        const upperTitle = title.toUpperCase()
        const upperPrefix = prefix.toUpperCase()

        return upperPrefix.includes(upperKeyword) || upperTitle.includes(upperKeyword)
      })
    },
    itemClick(row) {
      return row.prefix
    }
  })

  return function unbindAutocompletes() {
    autocomplete.destroy()
  }
}