From 10fd1038fc34109f6e068857b78821ffae8140ba Mon Sep 17 00:00:00 2001 From: Mahdi Dibaiee Date: Sun, 26 Jul 2015 14:07:07 +0430 Subject: [PATCH] 1 - 2 --- 1.html | 12 ++++++ 2.html | 12 ++++++ build/1.js | 75 +++++++++++++++++++++++++++++++++ build/10.js | 102 +++++++++++++++++++++++++++++++++++++++++++++ build/2.js | 85 +++++++++++++++++++++++++++++++++++++ build/demo/data.js | 4 +- build/index.js | 98 ------------------------------------------- build/trie.js | 18 ++++---- demo/data.html | 2 +- demo/data.js | 6 +-- demo/data.json | 6 +-- index.html | 24 ----------- src/1.js | 35 ++++++++++++++++ src/2.js | 45 ++++++++++++++++++++ src/index.js | 34 --------------- src/trie.js | 16 ++++--- style.css | 81 ++++++++++++++--------------------- 17 files changed, 423 insertions(+), 232 deletions(-) create mode 100644 1.html create mode 100644 2.html create mode 100644 build/1.js create mode 100644 build/10.js create mode 100644 build/2.js delete mode 100644 build/index.js delete mode 100644 index.html create mode 100644 src/1.js create mode 100644 src/2.js delete mode 100644 src/index.js 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; }