D3 Examples - Genesis, Inverted Index, Search Trie

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <script src="genesis.js"></script>
  <script src="trie_d.js"></script>
  <script src="index_d.js"></script>
  <script src="search.js"></script>
  <style>
    body { background:#d9e5ea; } input { font-size:24px; }
    a {
        margin:0 5px;
    }
  </style>
</head>
<body>
    <input type='text' id='search' />
    <div id='completions'></div>
    <div id='results'></div>
    <div id='preview'></div>
<script>
    var s = search();
    var $ = function(x) { return document.getElementById(x); };
    var completions = $('completions');
    var search = $('search');
    var results = $('results');
    var preview = $('preview');
    search.onkeyup = function() {
        var c = s.autocomplete(this.value);
        completions.innerHTML = '';
        for (var i = 0; i < c.length; i++) {
            var l = completions.appendChild(document.createElement('a'));
            l.onclick = function() {
                var s = search.value,
                    terms = s.split(/\s+/);
                if (!terms) return;
                terms[terms.length - 1] = this.innerHTML;
                search.value = terms.join(' ');
                completions.innerHTML = '';
                query();
                return false;
            }
            l.href = '#';
            l.innerHTML = c[i];
        }
        query();
    };
    function query() {
        var res = s.query(search.value, function(res) {
            results.innerHTML = '';
            for (var i = 0; i < res.length; i++) {
                var r = results.appendChild(document.createElement('a'));
                r.innerHTML = 'CHAPTER ' + res[i];
                r.href = '#' + res[i];;
                r.onclick = function() {
                    var chapter = this.href.split('#')[1];
                    preview.innerHTML = genesis[chapter].replace(/\r\n|\n|\r/g, '<br />');
                }
            }
        });
    }
</script>
</body>
</html>
    