thereadme/autocomplete-trie
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1 - 2

Browse Source
This commit is contained in:
Mahdi Dibaiee 2015-07-26 14:07:07 +04:30
parent ca572e392e
commit 10fd1038fc
17 changed files with 423 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
1.html Normal file
View File

@ -0,0 +1,12 @@
<head>
<link rel='stylesheet' href='./style.css'>
<title>Autocomplete - 1</title>
</head>
<input>
<div id='results'>
</div>
<script src='./build/trie.js'></script>
<script src='./build/1.js'></script>

12
2.html Normal file
View File

@ -0,0 +1,12 @@
<head>
<link rel='stylesheet' href='./style.css'>
<title>Autocomplete - 2</title>
</head>
<input>
<div id='results'>
</div>
<script src='./build/trie.js'></script>
<script src='./build/2.js'></script>

75
build/1.js Normal file
View File

@ -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 += "<li>" + node.name + " " + category + "</li>";
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2["return"]) {
_iterator2["return"]();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
});

102
build/10.js Normal file
View File

@ -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 += "<li>" + node.name + " " + category + "</li>";
}
} 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;
}
}
}
};

85
build/2.js Normal file
View File

@ -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 += "<li>" + node.name + " " + category + "</li>";
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2["return"]) {
_iterator2["return"]();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
});

4
build/demo/data.js
View File

@ -3,9 +3,9 @@
var data = new Trie(); var data = new Trie();
var json = { 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"], "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) { for (var category in json) {

98
build/index.js
View File

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

18
build/trie.js
View File

@ -70,20 +70,20 @@ var Trie = (function () {
return parent; return parent;
} }
}, { }, {
key: 'all', key: 'findWords',
value: function all(search) { value: function findWords(value) {
var node = this.find(search); 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) { top.children.forEach(function getWords(node) {
all.push(child); if (node.category) words.push(node);
child.children.forEach(addToAll); node.children.forEach(getWords);
}); });
return all; return words;
} }
}]); }]);

2
demo/data.html
View File

@ -1,5 +1,5 @@
<head> <head>
<title>Colors Trie</title> <title>Data Trie</title>
</head> </head>
<body> <body>

6
demo/data.js
View File

@ -1,13 +1,13 @@
let data = new Trie(); let data = new Trie();
let json = { let json = {
"color": ["red", "rebecca", "blue", "cyan", "pink", "purple", "color": ["Red", "Rebecca", "Blue", "Cyan", "Pink", "Purple",
"teal", "black", "white", "orange", "yellow", "green"], "Teal", "Black", "White", "Orange", "Yellow", "Green"],
"name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott", "name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott",
"Pat", "Vincent", "Daniel", "Patrick", "Tim"], "Pat", "Vincent", "Daniel", "Patrick", "Tim"],
"app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail", "app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail",
"Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora", "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora",
"f.lux", "LookUp", "WunderList", "Instagram", "Toggl"] "f.lux", "LookUp", "WunderList", "Instagram", "Toggl", "Mailbox"]
}; };
for (let category in json) { for (let category in json) {

6
demo/data.json
View File

@ -1,9 +1,9 @@
{ {
"color": ["red", "rebecca", "blue", "cyan", "pink", "purple", "color": ["Red", "Rebecca", "Blue", "Cyan", "Pink", "Purple",
"teal", "black", "white", "orange", "yellow", "green"], "Teal", "Black", "White", "Orange", "Yellow", "Green"],
"name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott", "name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott",
"Pat", "Vincent", "Daniel", "Patrick", "Tim"], "Pat", "Vincent", "Daniel", "Patrick", "Tim"],
"app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail", "app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail",
"Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora", "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora",
"f.lux", "LookUp", "WunderList", "Instagram", "Toggl"] "f.lux", "LookUp", "WunderList", "Instagram", "Toggl", "Mailbox"]
} }

24
index.html
View File

@ -1,24 +0,0 @@
<head>
<link rel='stylesheet' href='./style.css'>
<title>Autocomplete</title>
</head>
<input>
<br />
<div class='colors'>COLORS - #C01025</div>
<div class='coffee'>COFFEE - #COFFEE</div>
<div class='codecs'>CODECS - #C0D3C5</div>
<br />
<div class='rebecca'>Rebecca - #663399</div>
<div class='robots'>ROBOTS - #208075</div>
<div class='rio'>RIO - #210</div>
<br />
<div class='boo'>BOO - #B00</div>
<div class='boloss'>BOLOSS - #B01055</div>
<div class='badass'>BADASS - #BADA55</div>
<script src='./build/trie.js'></script>
<script src='./build/index.js'></script>

35
src/1.js Normal file
View File

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

45
src/2.js Normal file
View File

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

34
src/index.js
View File

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

16
src/trie.js
View File

@ -37,18 +37,16 @@ class Trie {
return parent; return parent;
} }
all(search) { findWords(value, parent = this.root) {
let node = this.find(search); let top = this.find(value, parent);
if (!node) return null; let words = [];
let all = [node]; top.children.forEach(function getWords(node) {
if (node.category) words.push(node);
node.children.forEach(function addToAll(child) { node.children.forEach(getWords);
all.push(child);
child.children.forEach(addToAll);
}); });
return all; return words;
} }
} }

81
style.css
View File

@ -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 { div {
width: 100px; display: block;
height: 70px;
box-sizing: border-box; box-sizing: border-box;
padding-top: 23px;
text-align: center;
color: white;
font-size: 13px; width: 60%;
font-family: sans-serif; height: auto;
font-weight: bold; background: white;
border: 1px solid rgb(139, 173, 255);
border-top: 0;
display: inline-block; margin: 0 auto;
float: left;
margin-top: 15px; padding: 20px 30px;
text-shadow: 0 0 1px black; border-bottom-left-radius: 4px;
} border-bottom-right-radius: 4px;
br { list-style: none;
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;
} }