https://odan.github.io/assets/search.js

1class jekyllSearch {
2  constructor(dataSource, searchField, resultsList, siteURL) {
3    this.dataSource = dataSource
4    this.searchField = document.querySelector(searchField)
5    this.resultsList = document.querySelector(resultsList)
6    this.siteURL = siteURL
7
8    this.displayResults = this.displayResults.bind(this)
9  }
10
11  fetchedData() {
12    return fetch(this.dataSource)
13      .then(blob => blob.json())
14  }
15
16  async findResults() {
17    const data = await this.fetchedData()
18    return data.filter(item => {
19      const regex = new RegExp(this.searchField.value, 'gi')
20      return item.title.match(regex) || item.content.match(regex)
21    })
22  }
23
24  async displayResults() {
25    const results = await this.findResults()
26    const html = results.map(item => {
27      return `
28        <li class="result">
29            <article class="result__article  article">
30                <h4>
31                  <a href="${this.siteURL + item.url}">${item.title}</a>
32                </h4>
33                <p>${item.excerpt}</p>
34            </article>
35        </li>`
36    }).join('')
37    if ((results.length == 0) || (this.searchField.value == '')) {
38      this.resultsList.innerHTML = `<p>Sorry, nothing was found</p>`
39    } else {
40      this.resultsList.innerHTML = html
41    }
42  }
43
44  init() {
45    const url = new URL(document.location)
46    if (url.searchParams.get("search")) {
47      this.searchField.value = url.searchParams.get("search")
48      this.displayResults()
49    }
50    this.searchField.addEventListener('keyup', () => {
51      this.displayResults()
52      url.searchParams.set("search", this.searchField.value)
53      window.history.pushState('', '', url.href)
54    })
55    this.searchField.addEventListener('keypress', event => {
56      if (event.keyCode == 13) {
57        event.preventDefault()
58      }
59    })
60  }
61}