1 - 2

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 += `<li>${node.name} ${category}</li>`;
+  }
+});

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 += `<li>${node.name} ${category}</li>`;
+  }
+});

src/index.js

@@ -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');
-  }
-};

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;
   }
 }