assets/js/search.js

   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 })();