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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
/* global lunr $ */
let lunrIndex
let lunrResult
let pagesIndex
/**
* A function for splitting a string into bigram.
*
* @static
* @param {?(string|object|object[])} obj - The object to convert into tokens
* @param {?object} metadata - Optional metadata to associate with every token
* @returns {lunr.Token[]}
*/
const bigramTokeniser = (obj, metadata) => {
if (obj == null || obj === undefined) {
return []
}
if (Array.isArray(obj)) {
return obj.map((t) => {
return new lunr.Token(
lunr.utils.asString(t).toLowerCase(),
lunr.utils.clone(metadata)
)
})
}
let str = obj.toString().trim().toLowerCase()
let tokens = []
for (let i = 0; i <= str.length - 2; i++) {
const tokenMetadata = lunr.utils.clone(metadata) || {}
tokenMetadata['position'] = [i, i + 2]
tokenMetadata['index'] = tokens.length
tokens.push(
new lunr.Token(
str.slice(i, i + 2),
tokenMetadata
)
)
}
return tokens
}
/**
* A function for separating a string into bigram and join it with space.
*
* @static
* @param {?string} query - The string to convert into tokens
* @returns {string}
*/
const queryNgramSeparator = (query) => {
const str = query.toString().trim().toLowerCase()
const tokens = []
for (let i = 0; i <= str.length - 2; i++) {
tokens.push(str.slice(i, i + 2))
}
return tokens.join(' ')
}
/**
* Preparation for using lunr.js
*/
const initLunr = () => {
$.getJSON('index.json').done((index) => {
pagesIndex = index
lunrIndex = lunr(builder => {
builder.tokenizer = bigramTokeniser
builder.pipeline.reset()
builder.ref('ref')
builder.field('title', { boost: 10 })
builder.field('body')
builder.metadataWhitelist = ['position']
for (let page of pagesIndex) {
builder.add(page)
}
})
}).fail((jqxhr, textStatus, error) => {
const err = textStatus + ', ' + error
console.error('Error getting Hugo index flie:', err)
})
}
/**
* Searching pages using lunr
* @param {String} query - Query string for searching
* @return {Object[]} - Array of search results
*/
const search = (query) => {
lunrResult = lunrIndex.search(queryNgramSeparator(query))
return lunrResult.map((result) => {
return pagesIndex.filter((page) => {
return page.ref === result.ref
})[0]
})
}
/**
* Setup UI for Search
*/
const initUI = () => {
// Clear query when clear icon is clicked
$('#searchBoxIcon').click(() => {
$('#searchBoxInput').val('')
$('#searchBoxInput').trigger('keyup')
})
// Event when chenging query
$('#searchBoxInput').keyup(event => {
const $searchResults = $('#searchResults')
const query = $(event.currentTarget).val()
// Icon switching
const iconUrl = $('#searchBoxIcon').attr('src')
if (query.length) {
$('#searchBoxIcon').attr('src', iconUrl.replace('search.png', 'clear.png'))
$('#searchBoxIcon').css('cursor', 'pointer')
} else {
$('#searchBoxIcon').attr('src', iconUrl.replace('clear.png', 'search.png'))
$('#searchBoxIcon').css('cursor', 'default')
}
// Only trigger a search when 2 chars. at least have been provided
if (query.length < 2) {
$searchResults.hide()
return
}
// Display search results
renderResults(search(query))
$searchResults.show()
})
// Emit keyup event for when the query is already setted with browser back etc.
$('#searchBoxInput').trigger('keyup')
}
/**
* Rendering search results
* @param {Object[]} results Array of search results
*/
const renderResults = (results) => {
const $searchResults = $('#searchResults')
const query = $('#searchBoxInput').val()
const BODY_LENGTH = 100
const MAX_PAGES = 10
// Clear search result
$searchResults.empty()
// Show message when results is empty
if (!results.length) {
$searchResults.append('<div class="searchResultPage">No results found for query "' + query + '"</div>')
return
}
// Only show the ten first results
results.slice(0, MAX_PAGES).forEach((result, idx) => {
const $searchResultPage = $('<div class="searchResultPage">')
const metadata = lunrResult[idx].matchData.metadata
const matchPosition = metadata[Object.keys(metadata)[0]].body ? metadata[Object.keys(metadata)[0]].body.position[0][0] : 0
const bodyStartPosition = (matchPosition - (BODY_LENGTH / 2) > 0) ? matchPosition - (BODY_LENGTH / 2) : 0
$searchResultPage.append('<a class="searchResultTitle" href="' + result.ref + '">' + result.title + '</a>')
$searchResultPage.append('<div class="searchResultBody">' + result.body.substr(bodyStartPosition, BODY_LENGTH) + '</div>')
$searchResults.append($searchResultPage)
// Highlight keyword
$('#searchResults').mark(query)
})
}
initLunr()
$(() => {
initUI()
})
|
