diff --git a/1.html b/1.html
new file mode 100644
index 0000000..a82cdd6
--- /dev/null
+++ b/1.html
@@ -0,0 +1,12 @@
+
+
+ Autocomplete - 1
+
+
+
+
+
+
+
+
+
diff --git a/2.html b/2.html
new file mode 100644
index 0000000..8511bbb
--- /dev/null
+++ b/2.html
@@ -0,0 +1,12 @@
+
+
+ Autocomplete - 2
+
+
+
+
+
+
+
+
+
diff --git a/build/1.js b/build/1.js
new file mode 100644
index 0000000..d280417
--- /dev/null
+++ b/build/1.js
@@ -0,0 +1,75 @@
+"use strict";
+
+var trie = new Trie();
+
+var data = {
+ "color": ["Red", "Rebecca", "Blue", "Cyan", "Pink", "Purple", "Teal", "Black", "White", "Orange", "Yellow", "Green"],
+ "name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott", "Pat", "Vincent", "Daniel", "Patrick", "Tim"],
+ "app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail", "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora", "f.lux", "LookUp", "WunderList", "Instagram", "Toggl", "Mailbox"]
+};
+
+for (var category in data) {
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+
+ try {
+ for (var _iterator = data[category][Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var item = _step.value;
+
+ var node = trie.add(item);
+ node.category = category;
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator["return"]) {
+ _iterator["return"]();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+}
+
+var input = document.querySelector('input');
+var results = document.querySelector('#results');
+
+input.addEventListener('keyup', function () {
+ results.innerHTML = '';
+
+ var nodes = trie.find(input.value);
+
+ if (!nodes) return;
+
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+
+ try {
+ for (var _iterator2 = nodes.children[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var node = _step2.value;
+
+ var category = node.category ? "- " + node.category : '';
+
+ results.innerHTML += "" + node.name + " " + category + "";
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2["return"]) {
+ _iterator2["return"]();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+});
diff --git a/build/10.js b/build/10.js
new file mode 100644
index 0000000..e283d6a
--- /dev/null
+++ b/build/10.js
@@ -0,0 +1,102 @@
+"use strict";
+
+var trie = new Trie();
+
+var data = {
+ "color": ["red", "rebecca", "blue", "cyan", "pink", "purple", "teal", "black", "white", "orange", "yellow", "green"],
+ "name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott", "Pat", "Vincent", "Daniel", "Patrick", "Tim"],
+ "app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail", "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora", "f.lux", "LookUp", "WunderList", "Instagram", "Toggl"]
+};
+
+for (var category in data) {
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+
+ try {
+ for (var _iterator = data[category][Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var item = _step.value;
+
+ var node = trie.add(item);
+ node.category = category;
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator["return"]) {
+ _iterator["return"]();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+}
+
+var input = document.querySelector('input');
+var results = document.querySelector('#results');
+
+input.addEventListener('keyup', function () {
+ results.innerHTML = '';
+
+ var nodes = trie.find(input.value);
+
+ if (!nodes) return;
+
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+
+ try {
+ for (var _iterator2 = nodes.children[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var node = _step2.value;
+
+ var category = node.category ? "- " + node.category : '';
+
+ results.innerHTML += "" + node.name + " " + category + "";
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2["return"]) {
+ _iterator2["return"]();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+});
+
+NodeList.prototype.hide = function () {
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+
+ try {
+ for (var _iterator3 = this[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var node = _step3.value;
+
+ node.classList.add('hidden');
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3["return"]) {
+ _iterator3["return"]();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+};
diff --git a/build/2.js b/build/2.js
new file mode 100644
index 0000000..cc5d3ae
--- /dev/null
+++ b/build/2.js
@@ -0,0 +1,85 @@
+"use strict";
+
+var trie = new Trie();
+
+var data = {
+ "color": ["Red", "Rebecca", "Blue", "Cyan", "Pink", "Purple", "Teal", "Black", "White", "Orange", "Yellow", "Green"],
+ "name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott", "Pat", "Vincent", "Daniel", "Patrick", "Tim"],
+ "app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail", "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora", "f.lux", "LookUp", "WunderList", "Instagram", "Toggl", "Mailbox"]
+};
+
+for (var category in data) {
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+
+ try {
+ for (var _iterator = data[category][Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var item = _step.value;
+
+ var node = trie.add(item);
+ node.category = category;
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator["return"]) {
+ _iterator["return"]();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+}
+
+var input = document.querySelector('input');
+var results = document.querySelector('#results');
+
+input.addEventListener('keyup', function (e) {
+ // Tab Key
+ if (e.keyCode === 9) {
+ e.preventDefault();
+ var current = trie.find(input.value);
+
+ if (!current) return;
+
+ input.value = current.children[0].name;
+ }
+
+ results.innerHTML = '';
+
+ var nodes = trie.findWords(input.value);
+
+ if (!nodes) return;
+
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+
+ try {
+ for (var _iterator2 = nodes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var node = _step2.value;
+
+ var category = node.category ? "- " + node.category : '';
+
+ results.innerHTML += "" + node.name + " " + category + "";
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2["return"]) {
+ _iterator2["return"]();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+});
diff --git a/build/demo/data.js b/build/demo/data.js
index 6acc1b8..48cd749 100644
--- a/build/demo/data.js
+++ b/build/demo/data.js
@@ -3,9 +3,9 @@
var data = new Trie();
var json = {
- "color": ["red", "rebecca", "blue", "cyan", "pink", "purple", "teal", "black", "white", "orange", "yellow", "green"],
+ "color": ["Red", "Rebecca", "Blue", "Cyan", "Pink", "Purple", "Teal", "Black", "White", "Orange", "Yellow", "Green"],
"name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott", "Pat", "Vincent", "Daniel", "Patrick", "Tim"],
- "app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail", "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora", "f.lux", "LookUp", "WunderList", "Instagram", "Toggl"]
+ "app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail", "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora", "f.lux", "LookUp", "WunderList", "Instagram", "Toggl", "Mailbox"]
};
for (var category in json) {
diff --git a/build/index.js b/build/index.js
deleted file mode 100644
index 96d137a..0000000
--- a/build/index.js
+++ /dev/null
@@ -1,98 +0,0 @@
-'use strict';
-
-var trie = new Trie();
-
-var divs = document.querySelectorAll('div');
-var colors = {};
-
-var _iteratorNormalCompletion = true;
-var _didIteratorError = false;
-var _iteratorError = undefined;
-
-try {
- for (var _iterator = divs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
- var div = _step.value;
-
- colors[div.className] = div;
-
- trie.add(div.className);
- }
-} catch (err) {
- _didIteratorError = true;
- _iteratorError = err;
-} finally {
- try {
- if (!_iteratorNormalCompletion && _iterator['return']) {
- _iterator['return']();
- }
- } finally {
- if (_didIteratorError) {
- throw _iteratorError;
- }
- }
-}
-
-var input = document.querySelector('input');
-
-input.addEventListener('keyup', function () {
- divs.hide();
-
- var nodes = trie.all(input.value);
-
- if (!nodes) return;
-
- var _iteratorNormalCompletion2 = true;
- var _didIteratorError2 = false;
- var _iteratorError2 = undefined;
-
- try {
- for (var _iterator2 = nodes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
- var node = _step2.value;
-
- var color = colors[node.value];
- if (!color) continue;
-
- color.classList.remove('hidden');
- }
- } catch (err) {
- _didIteratorError2 = true;
- _iteratorError2 = err;
- } finally {
- try {
- if (!_iteratorNormalCompletion2 && _iterator2['return']) {
- _iterator2['return']();
- }
- } finally {
- if (_didIteratorError2) {
- throw _iteratorError2;
- }
- }
- }
-});
-
-NodeList.prototype.hide = function () {
- var _iteratorNormalCompletion3 = true;
- var _didIteratorError3 = false;
- var _iteratorError3 = undefined;
-
- try {
- for (var _iterator3 = this[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
- var node = _step3.value;
-
- node.classList.add('hidden');
- }
- } catch (err) {
- _didIteratorError3 = true;
- _iteratorError3 = err;
- } finally {
- try {
- if (!_iteratorNormalCompletion3 && _iterator3['return']) {
- _iterator3['return']();
- }
- } finally {
- if (_didIteratorError3) {
- throw _iteratorError3;
- }
- }
- }
-};
diff --git a/build/trie.js b/build/trie.js
index 8878f16..fdfd8b7 100644
--- a/build/trie.js
+++ b/build/trie.js
@@ -70,20 +70,20 @@ var Trie = (function () {
return parent;
}
}, {
- key: 'all',
- value: function all(search) {
- var node = this.find(search);
+ key: 'findWords',
+ value: function findWords(value) {
+ var parent = arguments.length <= 1 || arguments[1] === undefined ? this.root : arguments[1];
- if (!node) return null;
+ var top = this.find(value, parent);
- var all = [node];
+ var words = [];
- node.children.forEach(function addToAll(child) {
- all.push(child);
- child.children.forEach(addToAll);
+ top.children.forEach(function getWords(node) {
+ if (node.category) words.push(node);
+ node.children.forEach(getWords);
});
- return all;
+ return words;
}
}]);
diff --git a/demo/data.html b/demo/data.html
index 5691972..721ce80 100644
--- a/demo/data.html
+++ b/demo/data.html
@@ -1,5 +1,5 @@
- Colors Trie
+ Data Trie
diff --git a/demo/data.js b/demo/data.js
index 099bed9..27f407b 100644
--- a/demo/data.js
+++ b/demo/data.js
@@ -1,13 +1,13 @@
let data = new Trie();
let json = {
- "color": ["red", "rebecca", "blue", "cyan", "pink", "purple",
- "teal", "black", "white", "orange", "yellow", "green"],
+ "color": ["Red", "Rebecca", "Blue", "Cyan", "Pink", "Purple",
+ "Teal", "Black", "White", "Orange", "Yellow", "Green"],
"name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott",
"Pat", "Vincent", "Daniel", "Patrick", "Tim"],
"app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail",
"Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora",
- "f.lux", "LookUp", "WunderList", "Instagram", "Toggl"]
+ "f.lux", "LookUp", "WunderList", "Instagram", "Toggl", "Mailbox"]
};
for (let category in json) {
diff --git a/demo/data.json b/demo/data.json
index 9fb0593..3a902d4 100644
--- a/demo/data.json
+++ b/demo/data.json
@@ -1,9 +1,9 @@
{
- "color": ["red", "rebecca", "blue", "cyan", "pink", "purple",
- "teal", "black", "white", "orange", "yellow", "green"],
+ "color": ["Red", "Rebecca", "Blue", "Cyan", "Pink", "Purple",
+ "Teal", "Black", "White", "Orange", "Yellow", "Green"],
"name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott",
"Pat", "Vincent", "Daniel", "Patrick", "Tim"],
"app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail",
"Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora",
- "f.lux", "LookUp", "WunderList", "Instagram", "Toggl"]
+ "f.lux", "LookUp", "WunderList", "Instagram", "Toggl", "Mailbox"]
}
diff --git a/index.html b/index.html
deleted file mode 100644
index cbf9afb..0000000
--- a/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
- Autocomplete
-
-
-
-
-
-COLORS - #C01025
-COFFEE - #COFFEE
-CODECS - #C0D3C5
-
-
-Rebecca - #663399
-ROBOTS - #208075
-RIO - #210
-
-
-BOO - #B00
-BOLOSS - #B01055
-BADASS - #BADA55
-
-
-
diff --git a/src/1.js b/src/1.js
new file mode 100644
index 0000000..f73efb1
--- /dev/null
+++ b/src/1.js
@@ -0,0 +1,35 @@
+const trie = new Trie();
+
+let data = {
+ "color": ["Red", "Rebecca", "Blue", "Cyan", "Pink", "Purple",
+ "Teal", "Black", "White", "Orange", "Yellow", "Green"],
+ "name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott",
+ "Pat", "Vincent", "Daniel", "Patrick", "Tim"],
+ "app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail",
+ "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora",
+ "f.lux", "LookUp", "WunderList", "Instagram", "Toggl", "Mailbox"]
+};
+
+for (let category in data) {
+ for (let item of data[category]) {
+ let node = trie.add(item);
+ node.category = category;
+ }
+}
+
+const input = document.querySelector('input');
+const results = document.querySelector('#results');
+
+input.addEventListener('keyup', () => {
+ results.innerHTML = '';
+
+ const nodes = trie.find(input.value);
+
+ if (!nodes) return;
+
+ for (let node of nodes.children) {
+ const category = node.category ? `- ${node.category}` : '';
+
+ results.innerHTML += `${node.name} ${category}`;
+ }
+});
diff --git a/src/2.js b/src/2.js
new file mode 100644
index 0000000..1484e96
--- /dev/null
+++ b/src/2.js
@@ -0,0 +1,45 @@
+const trie = new Trie();
+
+let data = {
+ "color": ["Red", "Rebecca", "Blue", "Cyan", "Pink", "Purple",
+ "Teal", "Black", "White", "Orange", "Yellow", "Green"],
+ "name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott",
+ "Pat", "Vincent", "Daniel", "Patrick", "Tim"],
+ "app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail",
+ "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora",
+ "f.lux", "LookUp", "WunderList", "Instagram", "Toggl", "Mailbox"]
+};
+
+for (let category in data) {
+ for (let item of data[category]) {
+ let node = trie.add(item);
+ node.category = category;
+ }
+}
+
+const input = document.querySelector('input');
+const results = document.querySelector('#results');
+
+input.addEventListener('keyup', e => {
+ // Tab Key
+ if (e.keyCode === 9) {
+ e.preventDefault();
+ const current = trie.find(input.value);
+
+ if (!current) return;
+
+ input.value = current.children[0].name;
+ }
+
+ results.innerHTML = '';
+
+ const nodes = trie.findWords(input.value);
+
+ if (!nodes) return;
+
+ for (let node of nodes) {
+ const category = node.category ? `- ${node.category}` : '';
+
+ results.innerHTML += `${node.name} ${category}`;
+ }
+});
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 38c9d84..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const trie = new Trie();
-
-
-const divs = document.querySelectorAll('div');
-const colors = {};
-
-for (let div of divs) {
- colors[div.className] = div;
-
- trie.add(div.className);
-}
-
-const input = document.querySelector('input');
-
-input.addEventListener('keyup', () => {
- divs.hide();
-
- const nodes = trie.all(input.value);
-
- if (!nodes) return;
-
- for (let node of nodes) {
- const color = colors[node.value];
- if (!color) continue;
-
- color.classList.remove('hidden');
- }
-});
-
-NodeList.prototype.hide = function() {
- for (let node of this) {
- node.classList.add('hidden');
- }
-};
diff --git a/src/trie.js b/src/trie.js
index 9c45ed3..79a3c99 100644
--- a/src/trie.js
+++ b/src/trie.js
@@ -37,18 +37,16 @@ class Trie {
return parent;
}
- all(search) {
- let node = this.find(search);
+ findWords(value, parent = this.root) {
+ let top = this.find(value, parent);
- if (!node) return null;
+ let words = [];
- let all = [node];
-
- node.children.forEach(function addToAll(child) {
- all.push(child);
- child.children.forEach(addToAll);
+ top.children.forEach(function getWords(node) {
+ if (node.category) words.push(node);
+ node.children.forEach(getWords);
});
- return all;
+ return words;
}
}
diff --git a/style.css b/style.css
index 6672b40..f5542c3 100644
--- a/style.css
+++ b/style.css
@@ -1,58 +1,41 @@
+html {
+ font-family: monospace;
+
+ background: rgb(236, 236, 236);
+
+ color: rgb(33, 33, 33);
+}
+
+input {
+ display: block;
+
+ margin: 30px auto 0;
+
+ width: 60%;
+ height: 30px;
+ padding: 5px 20px;
+
+ border: 1px solid rgb(139, 173, 255);
+ border-radius: 4px;
+}
+
div {
- width: 100px;
- height: 70px;
+ display: block;
box-sizing: border-box;
- padding-top: 23px;
- text-align: center;
- color: white;
- font-size: 13px;
- font-family: sans-serif;
- font-weight: bold;
+ width: 60%;
+ height: auto;
+ background: white;
+ border: 1px solid rgb(139, 173, 255);
+ border-top: 0;
- display: inline-block;
- float: left;
+ margin: 0 auto;
- margin-top: 15px;
+ padding: 20px 30px;
- text-shadow: 0 0 1px black;
-}
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
-br {
- clear: both;
-}
-
-.hidden {
- display: none;
-}
-
-.colors {
- background: #c01025;
-}
-.coffee {
- background: #c0ffee;
-}
-.codecs {
- background: #c0d3c5;
-}
-
-.rebecca {
- background: #663399;
-}
-.robots {
- background: #208075;
-}
-.rio {
- background: #210;
-}
-
-.boo {
- background: #b00;
-}
-.boloss {
- background: #b01055;
-}
-.badass {
- background: #bada55;
+ list-style: none;
}