116 lines
3.0 KiB
JavaScript
116 lines
3.0 KiB
JavaScript
"use strict";
|
|
|
|
class Autocomplete {
|
|
constructor(className, callback) {
|
|
this.callback = callback;
|
|
this.element = null;
|
|
this.hideTimeout = null;
|
|
this.visible = false;
|
|
this.default = null;
|
|
|
|
this.container = document.createElement("div");
|
|
this.container.style.position = "absolute";
|
|
this.container.style.display = "block";
|
|
this.container.style.opacity = 0;
|
|
this.container.className = className;
|
|
}
|
|
|
|
attach(el) {
|
|
el.setAttribute("autocomplete", "off");
|
|
|
|
el.addEventListener("focus", () => {
|
|
this.element = el;
|
|
const domRect = el.getBoundingClientRect();
|
|
this.container.style.left = `${domRect.left}px`;
|
|
this.container.style.width = `${domRect.width}px`;
|
|
this.container.style.top = `${domRect.bottom}px`;
|
|
this.update();
|
|
});
|
|
|
|
el.addEventListener("blur", () => {
|
|
if (this.element !== el) return;
|
|
if (!this.visible) return;
|
|
this.default = null;
|
|
this.hide();
|
|
});
|
|
|
|
el.addEventListener("keydown", e => {
|
|
if (this.element !== el) return;
|
|
if (e.key === "Escape") {
|
|
this.hide();
|
|
} else if (e.key === "Enter") {
|
|
if (this.default != null) {
|
|
el.value = this.default;
|
|
e.preventDefault();
|
|
this.update();
|
|
}
|
|
}
|
|
});
|
|
|
|
el.addEventListener("input", () => {
|
|
if (this.element !== el) return;
|
|
this.update();
|
|
});
|
|
}
|
|
|
|
hide() {
|
|
this.container.style.opacity = 0;
|
|
this.visible = false;
|
|
this.default = null;
|
|
clearTimeout(this.hideTimeout);
|
|
this.hideTimeout = setTimeout(() => {
|
|
this.hideTimeout = null;
|
|
while (this.container.firstChild)
|
|
this.container.removeChild(this.container.firstChild);
|
|
document.body.removeChild(this.container);
|
|
}, 500);
|
|
}
|
|
|
|
update() {
|
|
const el = this.element;
|
|
|
|
this.callback(el.value, suggestions => {
|
|
if (this.element !== el) return;
|
|
this.default = null;
|
|
|
|
if (!suggestions.length) {
|
|
if (this.visible) this.hide();
|
|
|
|
return;
|
|
}
|
|
|
|
while (this.container.firstChild)
|
|
this.container.removeChild(this.container.firstChild);
|
|
|
|
if (!this.visible) {
|
|
if (!this.hideTimeout) {
|
|
document.body.appendChild(this.container);
|
|
window.getComputedStyle(this.container).opacity;
|
|
} else {
|
|
clearTimeout(this.hideTimeout);
|
|
this.hideTimeout = null;
|
|
}
|
|
this.container.style.opacity = 1;
|
|
this.visible = true;
|
|
}
|
|
|
|
this.default = suggestions[0];
|
|
|
|
for (const suggestion of suggestions) {
|
|
const e = document.createElement("div");
|
|
e.className = "suggestion";
|
|
const t = document.createTextNode(suggestion);
|
|
e.appendChild(t);
|
|
e.addEventListener("mousedown", ev => {
|
|
ev.preventDefault();
|
|
el.value = suggestion;
|
|
if (this.element === el) this.update(el);
|
|
});
|
|
this.container.appendChild(e);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
export default Autocomplete;
|