1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
{{ $searchData := resources.Get "list.json" | resources.ExecuteAsTemplate "search-data.json" . }}
const searchDataURL = '{{ $searchData.RelPermalink }}'
const init = () => {
const searchBox = document.querySelector('#searchBox')
if (searchBox === null) {
return
}
let index = new FlexSearch.Document({
tokenize: 'reverse',
document: {
field: ['title', 'body'],
store: ['title', 'href', 'body']
},
})
fetch(searchDataURL)
.then(pages => pages.json())
.then(pages => {
for(let i = 0; i < pages.length; i++){
index.add(i, pages[i]);
}
})
searchBox.addEventListener('keyup', function (event) {
let searchResultsArea = document.querySelector('#searchResults')
let query = event.currentTarget.value
// Only trigger a search when 2 chars. at least have been provided
if (query.length < 2) {
searchResultsArea.style.display = 'none'
return
}
// Display search results
renderResults(index.search(query, 10, { enrich: true }));
searchResultsArea.style.display = 'block'
})
}
/**
* Rendering search results
* @param {Object[]} results Array of search results ( fields[] => { field, result[] => { document }} )
*/
const renderResults = (results) => {
const searchResults = document.querySelector('#searchResults')
const query = document.querySelector('#searchBox').value
const BODY_LENGTH = 100
// Clear search result
while (searchResults.firstChild)
searchResults.removeChild(searchResults.firstChild)
// Show message when results is empty
if (!results.length) {
let resultPage = document.createElement('div')
resultPage.className = 'searchResultPage'
resultPage.innerHTML = 'No results found for query "' + query + '"'
searchResults.append(resultPage)
return
}
let arr = results[0].result
if (results.length > 1) {
arr.concat(results[1].result)
}
arr.filter((element, index, self) =>
self.findIndex(e => e.id === element.id) === index)
let instance = new Mark(document.querySelector('#searchResults'))
arr.forEach((result) => {
let resultPage = document.createElement('div')
resultPage.className = 'searchResultPage'
let resultTitle = document.createElement('a')
resultTitle.className = 'searchResultTitle'
resultTitle.href = result.doc.href
resultTitle.innerHTML = result.doc.title
resultPage.append(resultTitle)
let resultBody = document.createElement('div')
resultBody.className = 'searchResultBody'
let matchPos = result.doc.body.indexOf(query)
let bodyStartPos = matchPos - BODY_LENGTH / 2 > 0 ? matchPos - BODY_LENGTH / 2 : 0
resultBody.innerHTML = result.doc.body.substr(bodyStartPos, BODY_LENGTH)
resultPage.append(resultBody)
searchResults.append(resultPage)
instance.mark(query)
})
}
init();
|
