Updates
This commit is contained in:
parent
10fd1038fc
commit
c459136de8
1
1.html
1
1.html
@ -8,5 +8,6 @@
|
|||||||
<div id='results'>
|
<div id='results'>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src='./build/libs/browser-polyfill.min.js'></script>
|
||||||
<script src='./build/trie.js'></script>
|
<script src='./build/trie.js'></script>
|
||||||
<script src='./build/1.js'></script>
|
<script src='./build/1.js'></script>
|
||||||
|
1
2.html
1
2.html
@ -8,5 +8,6 @@
|
|||||||
<div id='results'>
|
<div id='results'>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src='./build/libs/browser-polyfill.min.js'></script>
|
||||||
<script src='./build/trie.js'></script>
|
<script src='./build/trie.js'></script>
|
||||||
<script src='./build/2.js'></script>
|
<script src='./build/2.js'></script>
|
||||||
|
6
README.md
Normal file
6
README.md
Normal 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.
|
@ -39,22 +39,24 @@ for (var category in data) {
|
|||||||
var input = document.querySelector('input');
|
var input = document.querySelector('input');
|
||||||
var results = document.querySelector('#results');
|
var results = document.querySelector('#results');
|
||||||
|
|
||||||
input.addEventListener('keyup', function (e) {
|
input.addEventListener('keydown', function (e) {
|
||||||
// Tab Key
|
// Tab Key
|
||||||
if (e.keyCode === 9) {
|
if (e.keyCode === 9) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var current = trie.find(input.value);
|
var current = trie.find(input.value);
|
||||||
|
|
||||||
if (!current) return;
|
if (!current.children.length) return;
|
||||||
|
|
||||||
input.value = current.children[0].name;
|
input.value = current.children[0].name;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
input.addEventListener('keyup', function () {
|
||||||
results.innerHTML = '';
|
results.innerHTML = '';
|
||||||
|
|
||||||
var nodes = trie.findWords(input.value);
|
var nodes = trie.findWords(input.value);
|
||||||
|
|
||||||
if (!nodes) return;
|
if (!nodes.length) return;
|
||||||
|
|
||||||
var _iteratorNormalCompletion2 = true;
|
var _iteratorNormalCompletion2 = true;
|
||||||
var _didIteratorError2 = false;
|
var _didIteratorError2 = false;
|
||||||
|
3
build/libs/browser-polyfill.min.js
vendored
Normal file
3
build/libs/browser-polyfill.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -75,6 +75,7 @@ var Trie = (function () {
|
|||||||
var parent = arguments.length <= 1 || arguments[1] === undefined ? this.root : arguments[1];
|
var parent = arguments.length <= 1 || arguments[1] === undefined ? this.root : arguments[1];
|
||||||
|
|
||||||
var top = this.find(value, parent);
|
var top = this.find(value, parent);
|
||||||
|
if (!top) return [];
|
||||||
|
|
||||||
var words = [];
|
var words = [];
|
||||||
|
|
||||||
|
@ -103,6 +103,7 @@
|
|||||||
<p id='explain-word'></p>
|
<p id='explain-word'></p>
|
||||||
<p id='explain-index'></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/libs/d3.js'></script>
|
||||||
<script src='../build/trie.js'></script>
|
<script src='../build/trie.js'></script>
|
||||||
<script src='../build/demo/draw.js'></script>
|
<script src='../build/demo/draw.js'></script>
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<script src='../build/libs/browser-polyfill.min.js'></script>
|
||||||
<script src='../build/libs/d3.js'></script>
|
<script src='../build/libs/d3.js'></script>
|
||||||
<script src='../build/trie.js'></script>
|
<script src='../build/trie.js'></script>
|
||||||
<script src='../build/demo/draw.js'></script>
|
<script src='../build/demo/draw.js'></script>
|
||||||
|
8
src/2.js
8
src/2.js
@ -20,22 +20,24 @@ for (let category in data) {
|
|||||||
const input = document.querySelector('input');
|
const input = document.querySelector('input');
|
||||||
const results = document.querySelector('#results');
|
const results = document.querySelector('#results');
|
||||||
|
|
||||||
input.addEventListener('keyup', e => {
|
input.addEventListener('keydown', e => {
|
||||||
// Tab Key
|
// Tab Key
|
||||||
if (e.keyCode === 9) {
|
if (e.keyCode === 9) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const current = trie.find(input.value);
|
const current = trie.find(input.value);
|
||||||
|
|
||||||
if (!current) return;
|
if (!current.children.length) return;
|
||||||
|
|
||||||
input.value = current.children[0].name;
|
input.value = current.children[0].name;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
input.addEventListener('keyup', () => {
|
||||||
results.innerHTML = '';
|
results.innerHTML = '';
|
||||||
|
|
||||||
const nodes = trie.findWords(input.value);
|
const nodes = trie.findWords(input.value);
|
||||||
|
|
||||||
if (!nodes) return;
|
if (!nodes.length) return;
|
||||||
|
|
||||||
for (let node of nodes) {
|
for (let node of nodes) {
|
||||||
const category = node.category ? `- ${node.category}` : '';
|
const category = node.category ? `- ${node.category}` : '';
|
||||||
|
3
src/libs/browser-polyfill.min.js
vendored
Normal file
3
src/libs/browser-polyfill.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -39,6 +39,7 @@ class Trie {
|
|||||||
|
|
||||||
findWords(value, parent = this.root) {
|
findWords(value, parent = this.root) {
|
||||||
let top = this.find(value, parent);
|
let top = this.find(value, parent);
|
||||||
|
if (!top) return [];
|
||||||
|
|
||||||
let words = [];
|
let words = [];
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user