This commit is contained in:
Mahdi Dibaiee 2015-07-26 14:27:33 +04:30
parent 10fd1038fc
commit c459136de8
11 changed files with 28 additions and 6 deletions

1
1.html
View File

@ -8,5 +8,6 @@
<div id='results'>
</div>
<script src='./build/libs/browser-polyfill.min.js'></script>
<script src='./build/trie.js'></script>
<script src='./build/1.js'></script>

1
2.html
View File

@ -8,5 +8,6 @@
<div id='results'>
</div>
<script src='./build/libs/browser-polyfill.min.js'></script>
<script src='./build/trie.js'></script>
<script src='./build/2.js'></script>

6
README.md Normal file
View File

@ -0,0 +1,6 @@
Autocomplete using Tries
========================
See blog post: [Autocomplete using Tries](http://dibaiee.ir/autocomplete-predict-trie)
Please note that I'm using the property `name` instead of `value` in this code, because of [D3's Tree Layout](https://github.com/mbostock/d3/wiki/Tree-Layout) format.

View File

@ -39,22 +39,24 @@ for (var category in data) {
var input = document.querySelector('input');
var results = document.querySelector('#results');
input.addEventListener('keyup', function (e) {
input.addEventListener('keydown', function (e) {
// Tab Key
if (e.keyCode === 9) {
e.preventDefault();
var current = trie.find(input.value);
if (!current) return;
if (!current.children.length) return;
input.value = current.children[0].name;
}
});
input.addEventListener('keyup', function () {
results.innerHTML = '';
var nodes = trie.findWords(input.value);
if (!nodes) return;
if (!nodes.length) return;
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;

3
build/libs/browser-polyfill.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -75,6 +75,7 @@ var Trie = (function () {
var parent = arguments.length <= 1 || arguments[1] === undefined ? this.root : arguments[1];
var top = this.find(value, parent);
if (!top) return [];
var words = [];

View File

@ -103,6 +103,7 @@
<p id='explain-word'></p>
<p id='explain-index'></p>
<script src='../build/libs/browser-polyfill.min.js'></script>
<script src='../build/libs/d3.js'></script>
<script src='../build/trie.js'></script>
<script src='../build/demo/draw.js'></script>

View File

@ -4,6 +4,7 @@
<body>
<script src='../build/libs/browser-polyfill.min.js'></script>
<script src='../build/libs/d3.js'></script>
<script src='../build/trie.js'></script>
<script src='../build/demo/draw.js'></script>

View File

@ -20,22 +20,24 @@ for (let category in data) {
const input = document.querySelector('input');
const results = document.querySelector('#results');
input.addEventListener('keyup', e => {
input.addEventListener('keydown', e => {
// Tab Key
if (e.keyCode === 9) {
e.preventDefault();
const current = trie.find(input.value);
if (!current) return;
if (!current.children.length) return;
input.value = current.children[0].name;
}
});
input.addEventListener('keyup', () => {
results.innerHTML = '';
const nodes = trie.findWords(input.value);
if (!nodes) return;
if (!nodes.length) return;
for (let node of nodes) {
const category = node.category ? `- ${node.category}` : '';

3
src/libs/browser-polyfill.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -39,6 +39,7 @@ class Trie {
findWords(value, parent = this.root) {
let top = this.find(value, parent);
if (!top) return [];
let words = [];