autocomplete-trie/build/demo/add.js

81 lines
1.9 KiB
JavaScript
Raw Normal View History

2015-07-26 07:27:50 +00:00
'use strict';
2015-07-26 08:25:34 +00:00
var data = new Trie();
2015-07-26 07:27:50 +00:00
2015-07-26 08:25:34 +00:00
data.add('go');
data.add('get');
data.add('boo');
data.add('ba');
2015-07-26 07:27:50 +00:00
2015-07-26 08:25:34 +00:00
document.addEventListener('DOMContentLoaded', function () {
2015-07-26 07:27:50 +00:00
draw();
// Form and other stuff
var form = document.querySelector('form');
var input = document.querySelector('input');
var explain = document.querySelector('#explain');
var explainWord = document.querySelector('#explain-word');
var explainIndex = document.querySelector('#explain-index');
form.addEventListener('submit', function (e) {
e.preventDefault();
var word = input.value;
if (!explain.checked) {
data.add(word);
draw();
return;
}
var separated = '<span>' + word.split('').join('</span><span>') + '</span>';
explainWord.innerHTML = separated;
var indexLeft = explainWord.children[0].offsetLeft;
var indexMargin = 20;
var indexWidth = explainWord.children[0].offsetWidth + indexMargin;
var index = 0;
var key = '';
var intv = setInterval(function () {
d3.selectAll('tspan').attr('class', '');
d3.selectAll('#explain-word span').attr('class', '');
d3.selectAll('.node').attr('class', 'node');
var char = word[index];
if (!char) {
clearInterval(intv);
explainIndex.innerHTML = '';
explainWord.innerHTML = '';
return;
}
key += char;
var s = explainWord.children[index];
s.classList.add('highlight');
explainIndex.style.left = indexLeft + index * indexWidth + 'px';
explainIndex.innerHTML = index;
var node = document.querySelector('[data-word="' + key + '"]');
if (!node) {
data.add(word.slice(0, index + 1));
draw();
node = document.querySelector('[data-word="' + key + '"]');
}
node.classList.add('highlight');
var text = node.querySelector('text');
text.children[index].classList.add('highlight');
index++;
}, 1000);
});
});