From c547e6910ea7ad077771343ae75a4204223a118a Mon Sep 17 00:00:00 2001 From: BuildTools Date: Thu, 8 Dec 2016 22:40:08 +0100 Subject: use events and fix focus issues --- public/javascripts/autocomplete.js | 35 ++++++++++++++++------------------- 1 file changed, 16 insertions(+), 19 deletions(-) (limited to 'public/javascripts/autocomplete.js') diff --git a/public/javascripts/autocomplete.js b/public/javascripts/autocomplete.js index 7e7fcbe..681dba8 100644 --- a/public/javascripts/autocomplete.js +++ b/public/javascripts/autocomplete.js @@ -1,15 +1,17 @@ /* global USERS */ const fuzzy = require('fuzzy') -const search = require('./search') - +const EventEmitter = require('events') +const process = require('process') const self = {} self._items = [] self._selectedItemIndex = -1 +self.events = new EventEmitter() + self._nodes = { - form: document.querySelector('#search'), + search: document.querySelector('#search'), input: document.querySelector('input[type="search"]'), autocomplete: document.querySelector('.autocomplete') } @@ -32,6 +34,14 @@ self.getItems = function () { return self._items } +self.show = function () { + self._nodes.autocomplete.style.display = 'block' +} + +self.hide = function () { + self._nodes.autocomplete.style.display = 'none' +} + self._removeAllItems = function () { while (self._nodes.autocomplete.firstChild) { self._nodes.autocomplete.removeChild(self._nodes.autocomplete.firstChild) @@ -43,7 +53,6 @@ self._removeAllItems = function () { 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) } @@ -78,22 +87,11 @@ self._calculate = function (searchTerm) { } self._handleItemClick = function (event) { + if (!self._nodes.autocomplete.contains(event.target)) return 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.events.emit('select', self.getSelectedItem()) } self._handleTextUpdate = function () { @@ -116,8 +114,7 @@ self._handleKeydown = function (event) { } } -self._nodes.input.addEventListener('focus', self._handleFocus) -self._nodes.input.addEventListener('blur', self._handleBlur) +self._nodes.autocomplete.addEventListener('click', self._handleItemClick) self._nodes.input.addEventListener('input', self._handleTextUpdate) self._nodes.input.addEventListener('keydown', self._handleKeydown) -- cgit v1.1