blob: 2c7188afadba86f1fd808e896f743863a2968d58 (
plain)
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
|
// Global searchConfig
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('.search-input');
const container = document.querySelector('.search-result-container');
const localSearch = new LocalSearch({
path : searchConfig.path,
top_n_per_article: searchConfig.top_n_per_article,
unescape : searchConfig.unescape
});
if (searchConfig.preload) {
// preload the search data when the page loads
console.log("loading page");
localSearch.fetchData();
}
function openSearchPopup() {
document.querySelector('.search-popup').classList.add('search-activate');
if (!localSearch.isfetched) {
localSearch.fetchData();
}
}
function closeSearchPopup() {
document.querySelector('.search-popup').classList.remove('search-activate');
// refresh search box
input.value = '';
container.innerHTML = `<div class="search-result-message" ></div>`;
}
// open search box
document.querySelector('.search-btn').addEventListener('click', openSearchPopup);
// close search box
document.querySelector('.search-popup-overlay').addEventListener('click', closeSearchPopup);
document.querySelector('.search-close-btn').addEventListener('click', closeSearchPopup);
function displaySearchResult() {
if (!localSearch.isfetched) return;
const searchText = input.value.trim().toLowerCase();
const keywords = searchText.split(/[-\s]+/);
if (searchText.length > 0) {
resultItems = localSearch.getResultItems(keywords);
}
if (keywords.length === 1 && keywords[0] === '') {
// no input
container.innerHTML = `<div class="search-result-message" ></div>`
} else if (resultItems.length === 0) {
// no result
container.innerHTML = `<div class="search-result-message" >No result found</div>`;
} else {
// display result(s)
container.innerHTML = `
<div class="search-result-message">${resultItems.length} result(s) found</div>
<ul class="search-result-list">${resultItems.map(result => result.item).join('<div class="h-line-secondary"></div>')}
</ul>`;
}
};
if (searchConfig.trigger == 'auto') {
// whenever there is input, update search result
input.addEventListener('input', displaySearchResult);
} else {
// update search result when press "enter"
input.addEventListener('keypress', event => {
if (event.key === 'Enter') {
displaySearchResult();
}
})
}
window.addEventListener('search:loaded', displaySearchResult);
});
|
