blob: 7e7fcbef2a3f2c03b2f5af9740ae12835da4b010 (
plain)
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
/* global USERS */
const fuzzy = require('fuzzy')
const search = require('./search')
const self = {}
self._items = []
self._selectedItemIndex = -1
self._nodes = {
form: document.querySelector('#search'),
input: document.querySelector('input[type="search"]'),
autocomplete: document.querySelector('.autocomplete')
}
self.getSelectedItem = function () {
if (self.getItems() === []) return
if (self.getSelectedItemIndex() === -1) {
return self.getItems()[0]
} else {
return self.getItems()[self.getSelectedItemIndex()]
}
}
self.getSelectedItemIndex = function () {
return self._selectedItemIndex
}
self.getItems = function () {
return self._items
}
self._removeAllItems = function () {
while (self._nodes.autocomplete.firstChild) {
self._nodes.autocomplete.removeChild(self._nodes.autocomplete.firstChild)
}
self._items = []
self._selectedItemIndex = -1
}
self._addItem = function (item) {
const listItem = document.createElement('li')
listItem.textContent = item.value
listItem.addEventListener('click', self._handleItemClick)
self._nodes.autocomplete.appendChild(listItem)
self._items.push(item)
}
self._moveSelected = function (shift) {
if (self._selectedItemIndex + shift >= self.getItems().length) {
self._selectedItemIndex = -1
} else if (self._selectedItemIndex + shift < -1) {
self._selectedItemIndex = self.getItems().length - 1
} else {
self._selectedItemIndex += shift
}
for (let i = 0; i < self.getItems().length; i++) {
self._nodes.autocomplete.children[i].classList.remove('selected')
}
if (self._selectedItemIndex >= 0) {
self._nodes.autocomplete
.children[self._selectedItemIndex].classList.add('selected')
}
}
self._calculate = function (searchTerm) {
const allResults = fuzzy.filter(searchTerm, USERS, {
extract: item => item.value
})
const firstResults = allResults.slice(0, 7)
const originalResults = firstResults.map(result => result.original)
return originalResults
}
self._handleItemClick = function (event) {
const itemIndex = Array.prototype.indexOf
.call(self._nodes.autocomplete.children, event.target)
console.log(itemIndex)
self._selectedItemIndex = itemIndex
console.log(search)
search.submit()
}
self._handleFocus = function () {
self._nodes.autocomplete.style.display = 'block'
}
self._handleBlur = function (event) {
// console.log(document.querySelector(':focus'))
// if (event.target.parentNode === self._nodes.autocomplete) return
// self._nodes.autocomplete.style.display = 'none'
}
self._handleTextUpdate = function () {
const results = self._calculate(self._nodes.input.value)
self._removeAllItems()
for (let i = 0; i < results.length; i++) {
self._addItem(results[i])
}
}
self._handleKeydown = function (event) {
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
event.preventDefault()
if (event.key === 'ArrowDown') {
self._moveSelected(1)
} else if (event.key === 'ArrowUp') {
self._moveSelected(-1)
}
}
}
self._nodes.input.addEventListener('focus', self._handleFocus)
self._nodes.input.addEventListener('blur', self._handleBlur)
self._nodes.input.addEventListener('input', self._handleTextUpdate)
self._nodes.input.addEventListener('keydown', self._handleKeydown)
module.exports = self
|
