| 1 | /* eslint-disable no-undef, guard-for-in */ |
| 2 | |
| 3 | /** |
| 4 | * @file |
| 5 | * A JavaScript file for flexsearch. |
| 6 | */ |
| 7 | |
| 8 | import * as params from '@params'; |
| 9 | |
| 10 | (function () { |
| 11 | |
| 12 | 'use strict'; |
| 13 | |
| 14 | const index = new FlexSearch.Document({ |
| 15 | document: { |
| 16 | id: 'id', |
| 17 | index: ['title','tags','content','date'], |
| 18 | store: ['title','summary','date','permalink'] |
| 19 | }, |
| 20 | tokenize: 'forward' |
| 21 | }); |
| 22 | |
| 23 | function showResults(items) { |
| 24 | const template = document.querySelector('template').content; |
| 25 | const fragment = document.createDocumentFragment(); |
| 26 | |
| 27 | const results = document.querySelector('.search-results'); |
| 28 | results.textContent = ''; |
| 29 | |
| 30 | for (const id in items) { |
| 31 | const item = items[id]; |
| 32 | const result = template.cloneNode(true); |
| 33 | const a = result.querySelector('a'); |
| 34 | // const time = result.querySelector('time'); |
| 35 | // const content = result.querySelector('.content'); |
| 36 | a.innerHTML = item.title; |
| 37 | a.href = item.permalink; |
| 38 | // time.innerText = item.date; |
| 39 | // content.innerHTML = item.summary; |
| 40 | fragment.appendChild(result); |
| 41 | } |
| 42 | results.appendChild(fragment); |
| 43 | } |
| 44 | |
| 45 | function doSearch() { |
| 46 | const query = document.querySelector('.search-text').value.trim(); |
| 47 | const results = index.search({ |
| 48 | query: query, |
| 49 | enrich: true, |
| 50 | limit: params.searchLimit |
| 51 | }); |
| 52 | const items = {}; |
| 53 | results.forEach(function (result) { |
| 54 | result.result.forEach(function (r) { |
| 55 | items[r.id] = r.doc; |
| 56 | }); |
| 57 | }); |
| 58 | showResults(items); |
| 59 | } |
| 60 | |
| 61 | function enableUI() { |
| 62 | const searchform = document.querySelector('.search-form'); |
| 63 | searchform.addEventListener('submit', function (e) { |
| 64 | e.preventDefault(); |
| 65 | doSearch(); |
| 66 | }); |
| 67 | searchform.addEventListener('input', function () { |
| 68 | doSearch(); |
| 69 | }); |
| 70 | document.querySelector('.search-loading').classList.add('hidden'); |
| 71 | document.querySelector('.search-input').classList.remove('hidden'); |
| 72 | document.querySelector('.search-text').focus(); |
| 73 | } |
| 74 | |
| 75 | function buildIndex() { |
| 76 | document.querySelector('.search-loading').classList.remove('hidden'); |
| 77 | fetch('/searchindex.json') |
| 78 | .then(function (response) { |
| 79 | return response.json(); |
| 80 | }) |
| 81 | .then(function (data) { |
| 82 | data.forEach(function (item) { |
| 83 | index.add(item); |
| 84 | }); |
| 85 | }); |
| 86 | } |
| 87 | |
| 88 | buildIndex(); |
| 89 | enableUI(); |
| 90 | })(); |