moviewyrm/bookwyrm/static/js/autocomplete.js

185 lines
4.2 KiB
JavaScript
Raw Normal View History

2022-01-11 00:55:30 +00:00
(function () {
"use strict";
2021-12-27 20:41:27 +00:00
/**
* Suggest a completion as a user types
*
* Use `data-autocomplete="<completions set identifier>"`on the input field.
* specifying the trie to be used for autocomplete
*
* @example
* <input
* type="input"
* data-autocomplete="mimetype"
* >
* @param {Event} event
* @return {undefined}
*/
function autocomplete(event) {
const input = event.target;
// Get suggestions
2022-01-13 01:02:30 +00:00
let trie = tries[input.getAttribute("data-autocomplete")];
let suggestions = getSuggestions(input.value, trie);
2021-12-27 20:41:27 +00:00
const boxId = input.getAttribute("list");
2021-12-27 20:41:27 +00:00
// Create suggestion box, if needed
let suggestionsBox = document.getElementById(boxId);
// Clear existing suggestions
suggestionsBox.innerHTML = "";
// Populate suggestions box
2022-01-11 00:55:30 +00:00
suggestions.forEach((suggestion) => {
const suggestionItem = document.createElement("option");
2021-12-27 20:41:27 +00:00
suggestionItem.textContent = suggestion;
suggestionsBox.appendChild(suggestionItem);
});
}
function getSuggestions(input, trie) {
// Follow the trie through the provided input
2022-01-17 18:52:16 +00:00
input = input.toLowerCase();
2022-01-11 00:55:30 +00:00
input.split("").forEach((letter) => {
2021-12-27 20:41:27 +00:00
if (!trie) {
return;
}
2022-01-13 01:08:10 +00:00
trie = trie[letter];
2021-12-27 20:41:27 +00:00
});
if (!trie) {
return [];
}
2022-01-11 00:44:43 +00:00
return searchTrie(trie);
2021-12-27 20:41:27 +00:00
}
2022-01-11 00:44:43 +00:00
function searchTrie(trie) {
const options = Object.values(trie);
2021-12-27 20:41:27 +00:00
2022-01-11 00:55:30 +00:00
if (typeof trie == "string") {
2022-01-11 00:53:30 +00:00
return [trie];
2021-12-27 20:41:27 +00:00
}
2022-01-11 00:55:30 +00:00
return options
.map((option) => {
const newTrie = option;
2021-12-27 20:41:27 +00:00
2022-01-11 00:55:30 +00:00
if (typeof newTrie == "string") {
return [newTrie];
}
2022-01-11 00:53:30 +00:00
2022-01-11 00:55:30 +00:00
return searchTrie(newTrie);
})
.reduce((prev, next) => prev.concat(next));
2021-12-27 20:41:27 +00:00
}
2022-01-11 00:55:30 +00:00
document.querySelectorAll("[data-autocomplete]").forEach((input) => {
input.addEventListener("input", autocomplete);
});
2021-12-27 20:41:27 +00:00
})();
2022-01-13 01:19:34 +00:00
const tries = {
mimetype: {
2022-01-11 00:55:30 +00:00
a: {
2022-01-13 01:02:30 +00:00
a: {
c: "AAC",
},
z: {
w: "AZW",
},
2022-01-11 00:55:30 +00:00
},
2022-01-13 01:02:30 +00:00
d: {
a: {
i: {
s: {
y: "Daisy",
},
},
},
2022-01-11 00:53:30 +00:00
},
2022-01-13 01:02:30 +00:00
e: {
p: {
u: {
b: "ePub",
},
},
2022-01-11 00:53:30 +00:00
},
2022-01-13 01:02:30 +00:00
f: {
l: {
a: {
c: "FLAC",
},
},
},
h: {
t: {
m: {
l: "HTML",
},
},
},
m: {
4: {
a: "M4A",
b: "M4B",
},
o: {
b: {
i: "MOBI",
},
},
p: {
3: "MP3",
},
},
o: {
g: {
g: "OGG",
},
},
p: {
d: {
f: "PDF",
},
l: {
a: {
i: {
n: {
t: {
e: {
x: {
t: "Plaintext",
},
},
},
},
},
},
},
2022-01-17 17:03:53 +00:00
r: {
i: {
n: {
t: {
" ": {
b: {
o: {
o: {
k: "Print book",
},
},
},
},
},
},
},
},
2021-12-27 20:41:27 +00:00
},
2022-01-11 00:44:43 +00:00
},
2021-12-27 20:41:27 +00:00
};