可搜尋的下拉式選單 - Search Dropdowns

1
2
3
4
5
<button class="btn btn-dropdown"
        data-search-dropdown>
  點我搜尋
  <i class="icon-chevron-down"></i>
</button>

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
export default function bindSearchDropdowns() {
  const { SearchDropdown } = window.beyond

  const rows = [
    { prefix: 'SP', title: '🔥SHARE.CO🔥經典香水吊卡 ➜ 糖果茉莉, 奇蹟罌粟, 能量麝香, 甜蜜莉莉' },
    { prefix: 'SPY', title: '🔥SHARE.CO🔥經典粉絲限定 VIP 方案' },
    { prefix: 'SW', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW1', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW2', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW3', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW4', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW5', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW6', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW7', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW8', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW9', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW10', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW11', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW12', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW13', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' },
    { prefix: 'SW14', title: '素TEE / 內褲 / 平口褲 ➜ 版型專為亞洲人身形設計' }
  ]

  const options = {
    placeholder: '搜尋',
    renderItem(row, i, selected) {
      return `
        <div class="search-dropdown-menu-item ${selected ? 'selected' : ''}"
             data-item>
          <strong>${row.prefix}</strong>
          <span>${row.title}</span>
        </div>
        `
    },
    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
    }
  }

  const searchDropdowns = Array.from(document.querySelectorAll('[data-search-dropdown]'))
    .map(dom => new SearchDropdown(dom, options))

  return function unbindSearchDropdowns() {
    searchDropdowns.forEach(s => s.destroy())
  }
}