gronk/js/search.js

136 lines
3.1 KiB
JavaScript
Raw Normal View History

2024-01-02 18:22:15 +00:00
/*
* search.js expects an array `data` containing objects with the following keys:
* headers: [string]
* path: string
* tags: [string]
* title: string
* uuid: string
*/
const HEADERS = "headers"
const PATH = "path"
const TAGS = "tags"
const TITLE = "title"
const SEARCH_TIMEOUT_MS = 100
var SEARCH_TIMEOUT_ID = -1
2024-01-02 18:22:15 +00:00
const fuse = new Fuse(search_data, {
2021-11-17 14:44:11 +00:00
keys: [
{
name: HEADERS,
2024-01-02 18:22:15 +00:00
weight: 1
2021-11-17 14:44:11 +00:00
},
{
name: PATH,
2023-02-06 11:51:27 +00:00
weight: 0.1
2021-11-17 14:44:11 +00:00
},
{
name: TAGS,
2024-01-02 18:22:15 +00:00
weight: 0.5
2021-11-17 14:44:11 +00:00
},
{
name: TITLE,
2024-01-02 18:22:15 +00:00
weight: 2
2021-11-17 14:44:11 +00:00
}
],
2023-02-06 13:02:00 +00:00
includeMatches: true,
useExtendedSearch: true,
ignoreLocation: true,
threshhold: 0.4,
2021-08-19 13:43:42 +00:00
})
2023-02-06 13:02:00 +00:00
const RESULTS_MAX = 5
2021-08-19 13:43:42 +00:00
const searchBar = document.getElementById('search')
const resultsDiv = document.getElementById('results')
2021-08-19 13:43:42 +00:00
var results = []
function updateResultsWithTimeout() {
console.log("clearing timeout")
if (SEARCH_TIMEOUT_ID) SEARCH_TIMEOUT_ID = clearTimeout(SEARCH_TIMEOUT_ID)
SEARCH_TIMEOUT_ID = setTimeout(updateResults, SEARCH_TIMEOUT_MS)
}
function updateResults() {
console.log("updating results")
resultsDiv.innerHTML = ''
2023-02-06 13:02:00 +00:00
results = fuse.search(searchBar.value, { limit: RESULTS_MAX })
results.forEach(r => {
2021-08-19 13:43:42 +00:00
wrapper = document.createElement('div')
2021-08-19 14:31:28 +00:00
wrapper.className = "article"
display_matches = {}
display_matches[HEADERS] = []
display_matches[PATH] = []
display_matches[TAGS] = []
display_matches[TITLE] = []
2021-08-20 13:31:34 +00:00
r.matches.every(match => {
if (display_matches[match.key].length > 3) {
display_matches[match.key].push('...')
2021-08-20 13:31:34 +00:00
return false
}
display_match = match.value
if (match.indices.length >= 1) {
match.indices.sort((a, b) => (b[1]-b[0])-(a[1]-a[0]))
indexPair = match.indices[0]
matching_slice = match.value.slice(indexPair[0], indexPair[1]+1)
display_match = match.value.replace(
matching_slice,
'<span class="matchHighlight">' + matching_slice + '</span>'
)
2021-08-20 13:31:34 +00:00
}
display_matches[match.key].push(display_match)
2021-08-20 13:31:34 +00:00
return true
})
2021-08-19 13:43:42 +00:00
content = document.createElement('a')
content.innerHTML = r.item.title
content.href = r.item.path
2021-08-19 14:31:28 +00:00
2021-08-19 13:43:42 +00:00
wrapper.appendChild(content)
Object.keys(display_matches).forEach(key => {
if (display_matches[key].length < 1) return
p = document.createElement('p')
p.className = "smallText"
p.innerHTML += key + ": [" + display_matches[key].join(', ') + ']'
wrapper.appendChild(p)
})
2021-08-19 14:31:28 +00:00
resultsDiv.appendChild(wrapper)
2021-08-19 13:43:42 +00:00
})
}
searchBar.addEventListener('keyup', e => {
console.log(e)
// if user pressed enter
if (e.keyCode === 13) {
if (e.shiftKey) {
window.open(results[0].item.path, '_blank')
} else {
window.location.href = results[0].item.path
}
return
}
updateResultsWithTimeout()
})
searchBar.addEventListener('change', updateResultsWithTimeout)
const searchParams = new URL(window.location.href).searchParams;
searchBar.value = searchParams.get('q');
updateResults();
console.log(results)
if (searchParams.has('lucky')) {
window.location.href = results[0].item.path;
}