@itrocks/autocomplete 0.0.1 → 0.0.2

package/autocomplete.css

@@ -0,0 +1,25 @@
+.combobox input[data-type=object] {
+  display: block;
+}
+.combobox .suggestions {
+  background: white;
+  box-sizing: border-box;
+  border: 1px solid #ddd;
+  margin-top: -1px;
+  padding: 0;
+  position: absolute;
+}
+.combobox .suggestions > * {
+  cursor: pointer;
+  list-style: none;
+  padding: 0.5em 1em;
+}
+.combobox .suggestions > *:hover {
+  background: #efe;
+}
+.combobox .suggestions > *.selected {
+  background: #edf;
+}
+.combobox .suggestions > *.selected:hover {
+  background: #dce;
+}

package/autocomplete.d.ts

@@ -1,32 +1,46 @@
-interface HTMLAutoCompleteInputElement extends HTMLInputElement {
-    lastValue: string;
-    selectedValue?: string;
+interface Item {
+    caption: string;
+    id: number;
 }
 export declare class AutoComplete {
     idInput?: HTMLInputElement;
-    input: HTMLAutoCompleteInputElement;
+    input: HTMLInputElement;
+    lastKey: string;
     suggestions: Suggestions;
     constructor(input: HTMLInputElement);
-    autoIdInput(): void;
-    emptyClass(): void;
+    autoComplete(): void;
+    autoEmptyClass(): void;
+    autoIdInputValue(): void;
     fetch(): void;
+    initIdInput(): HTMLInputElement | undefined;
+    initInput(input: HTMLInputElement): HTMLInputElement;
+    keyDown(event: KeyboardEvent): void;
+    keyEnter(event: KeyboardEvent): void;
+    keyEscape(event: KeyboardEvent): void;
+    keyUp(event: KeyboardEvent): void;
     onBlur(_event: FocusEvent): void;
-    onKeyDown(event: KeyboardEvent): void;
     onInput(_event: Event): void;
+    onInputValueChange(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    suggest(value?: string): void;
 }
 declare class Suggestions {
     combo: AutoComplete;
-    list: HTMLUListElement;
+    list?: HTMLUListElement;
     constructor(combo: AutoComplete);
-    first(): {
-        caption: string;
-        id: number;
-    };
+    createList(): HTMLUListElement;
+    first(): Item | null;
     hide(): void;
-    show(): void;
-    update(suggestions: {
-        caption: string;
-        id: number;
-    }[]): void;
+    isFirstSelected(): boolean | null | undefined;
+    isLastSelected(): boolean | null | undefined;
+    isVisible(): boolean | undefined;
+    removeList(): void;
+    selected(item?: HTMLLIElement | null): Item | null;
+    selectFirst(): void;
+    selectNext(): Item | null;
+    selectPrevious(): Item | null;
+    selectSibling(sibling: 'nextElementSibling' | 'previousElementSibling'): HTMLLIElement | null;
+    show(): HTMLUListElement;
+    update(suggestions: Item[]): void;
 }
 export {};

package/autocomplete.js

@@ -1,43 +1,59 @@
 export class AutoComplete {
     idInput;
     input;
+    lastKey = '';
     suggestions;
     constructor(input) {
-        this.input = Object.assign(input, { lastValue: input.value });
+        this.input = this.initInput(input);
+        this.idInput = this.initIdInput();
         this.suggestions = new Suggestions(this);
-        this.autoIdInput();
         input.addEventListener('blur', event => this.onBlur(event));
         input.addEventListener('keydown', event => this.onKeyDown(event));
         input.addEventListener('input', event => this.onInput(event));
     }
-    autoIdInput() {
+    autoComplete() {
         const input = this.input;
-        const next = input.nextElementSibling;
-        const prev = input.previousElementSibling;
-        this.idInput
-            = ((next instanceof HTMLInputElement) && (next.type === 'hidden')) ? next
-                : ((prev instanceof HTMLInputElement) && (prev.type === 'hidden')) ? prev
-                    : undefined;
+        if (input.selectionStart !== input.value.length) {
+            return;
+        }
+        const suggestion = this.suggestions.selected();
+        if (!suggestion) {
+            return;
+        }
+        const caption = suggestion.caption;
+        const position = input.value.length;
+        if (position >= caption.length) {
+            return;
+        }
+        input.setRangeText(caption.slice(position));
+        input.setSelectionRange(position, input.value.length);
     }
-    emptyClass() {
+    autoEmptyClass() {
         const input = this.input;
         const classList = input.classList;
-        if (!input.value.length) {
+        if (input.value === '') {
             classList.add('empty');
-            delete input.selectedValue;
-            if (this.idInput)
-                this.idInput.value = '';
             return;
         }
-        if (classList.contains('empty')) {
-            (classList.length > 1)
-                ? classList.remove('empty')
-                : input.removeAttribute('class');
+        classList.remove('empty');
+        if (!classList.length) {
+            input.removeAttribute('class');
         }
     }
+    autoIdInputValue() {
+        const idInput = this.idInput;
+        if (!idInput)
+            return;
+        const input = this.input;
+        const suggestion = this.suggestions.selected();
+        idInput.value = (input.value === suggestion?.caption)
+            ? '' + suggestion.id
+            : '';
+    }
     fetch() {
         const input = this.input;
         const dataFetch = input.dataset.fetch ?? input.closest('[data-fetch]')?.dataset.fetch;
+        const lastKey = this.lastKey;
         const requestInit = { headers: { Accept: 'application/json' } };
         const summaryRoute = dataFetch + '?startsWith=' + input.value;
         fetch(summaryRoute, requestInit).then(response => response.text()).then(json => {
@@ -46,43 +62,117 @@ export class AutoComplete {
             const suggestions = summary.map(([id, caption]) => ({ caption, id: +id }))
                 .filter(item => item.caption.toLowerCase().startsWith(startsWith));
             this.suggestions.update(suggestions);
-            const suggestion = this.suggestions.first();
-            if (!suggestion) {
-                delete input.selectedValue;
-                if (this.idInput)
-                    this.idInput.value = '';
-                return;
+            if (!['Backspace', 'Delete'].includes(lastKey)) {
+                this.autoComplete();
             }
-            const caption = suggestion.caption;
-            input.selectedValue = caption;
-            if (this.idInput)
-                this.idInput.value = '' + suggestion.id;
-            const position = input.value.length;
-            input.setRangeText(caption.slice(position));
-            input.setSelectionRange(position, input.value.length);
+            this.onInputValueChange();
+            this.autoIdInputValue();
         });
     }
-    onBlur(_event) {
+    initIdInput() {
         const input = this.input;
-        if (!input.selectedValue)
+        const next = input.nextElementSibling;
+        const prev = input.previousElementSibling;
+        return ((next instanceof HTMLInputElement) && (next.type === 'hidden')) ? next
+            : ((prev instanceof HTMLInputElement) && (prev.type === 'hidden')) ? prev
+                : undefined;
+    }
+    initInput(input) {
+        input.dataset.lastValue = input.value;
+        return input;
+    }
+    keyDown(event) {
+        const suggestions = this.suggestions;
+        if (suggestions.isLastSelected()) {
+            return;
+        }
+        event.preventDefault();
+        if (!suggestions.isVisible()) {
+            suggestions.show();
             return;
-        input.value = input.selectedValue;
+        }
+        this.suggest(suggestions.selectNext()?.caption);
+    }
+    keyEnter(event) {
+        const suggestions = this.suggestions;
+        if (!suggestions.isVisible()) {
+            return;
+        }
+        event.preventDefault();
+        const suggestion = suggestions.selected();
+        if (!suggestion) {
+            return;
+        }
+        this.input.value = suggestion.caption;
+        this.onInputValueChange();
+        this.autoIdInputValue();
+        suggestions.hide();
+    }
+    keyEscape(event) {
+        const suggestions = this.suggestions;
+        if ((this.input.value === '') && !suggestions.isVisible()) {
+            return;
+        }
+        event.preventDefault();
+        if (suggestions.isVisible()) {
+            suggestions.hide();
+            return;
+        }
+        this.input.value = '';
+        this.onInputValueChange();
+        this.autoIdInputValue();
+    }
+    keyUp(event) {
+        const suggestions = this.suggestions;
+        if (!suggestions.isVisible()) {
+            return;
+        }
+        event.preventDefault();
+        if (suggestions.isFirstSelected()) {
+            suggestions.hide();
+            return;
+        }
+        this.suggest(suggestions.selectPrevious()?.caption);
+    }
+    onBlur(_event) {
+        setTimeout(() => this.suggestions.removeList());
+    }
+    onInput(_event) {
+        if (this.input.dataset.lastValue === this.input.value) {
+            return;
+        }
+        this.fetch();
+    }
+    onInputValueChange() {
+        this.input.dataset.lastValue = this.input.value;
+        this.autoEmptyClass();
     }
     onKeyDown(event) {
+        this.lastKey = event.key;
         switch (event.key) {
             case 'ArrowDown':
             case 'Down':
-                return this.suggestions.show();
+                return this.keyDown(event);
             case 'ArrowUp':
             case 'Up':
-                return this.suggestions.hide();
+                return this.keyUp(event);
+            case 'Escape':
+                return this.keyEscape(event);
+            case 'Enter':
+                return this.keyEnter(event);
         }
     }
-    onInput(_event) {
-        if (this.input.lastValue === this.input.value) {
+    suggest(value) {
+        if (typeof value !== 'string') {
             return;
         }
-        this.fetch();
+        const input = this.input;
+        const position = input.selectionStart;
+        input.value = value;
+        input.setSelectionRange(position, input.value.length);
+        this.autoComplete();
+        this.onInputValueChange();
+        this.autoIdInputValue();
     }
 }
 class Suggestions {
@@ -90,30 +180,101 @@ class Suggestions {
     list;
     constructor(combo) {
         this.combo = combo;
+    }
+    createList() {
         const list = this.list = document.createElement('ul');
         list.classList.add('suggestions');
-        list.style.display = 'none';
-        combo.input.insertAdjacentElement('afterend', list);
+        let input = this.combo.input;
+        const idInput = input.nextElementSibling;
+        if ((idInput instanceof HTMLInputElement) && (idInput.type === 'hidden')) {
+            input = idInput;
+        }
+        input.insertAdjacentElement('afterend', list);
+        return list;
     }
     first() {
-        const item = this.list.firstElementChild;
-        return { caption: item.innerText, id: +(item.dataset.id ?? 0) };
+        const item = this.list?.firstElementChild ?? null;
+        return item && { caption: item.innerText, id: +(item.dataset.id ?? 0) };
     }
     hide() {
-        this.list.style.display = 'none';
+        const list = this.list;
+        if (!list)
+            return;
+        list.style.display = 'none';
+    }
+    isFirstSelected() {
+        return this.list
+            && this.list.firstElementChild
+            && (this.list.firstElementChild === this.list.querySelector('li.selected'));
+    }
+    isLastSelected() {
+        return this.list
+            && this.list.lastElementChild
+            && (this.list.lastElementChild === this.list.querySelector('li.selected'));
+    }
+    isVisible() {
+        return this.list && (this.list.style.display !== 'none');
+    }
+    removeList() {
+        this.list?.remove();
+        this.list = undefined;
+    }
+    selected(item = null) {
+        item ??= this.list?.querySelector('li.selected') ?? null;
+        return item && { caption: item.innerText, id: +(item.dataset.id ?? 0) };
+    }
+    selectFirst() {
+        const list = this.list;
+        if (!list)
+            return;
+        list.querySelector('li.selected')?.classList.remove('selected');
+        list.firstElementChild?.classList.add('selected');
+    }
+    selectNext() {
+        return this.selected(this.selectSibling('nextElementSibling'));
+    }
+    selectPrevious() {
+        return this.selected(this.selectSibling('previousElementSibling'));
+    }
+    selectSibling(sibling) {
+        const list = this.list;
+        if (!list)
+            return null;
+        let item = list.querySelector('li.selected');
+        if (item && item[sibling]) {
+            item.classList.remove('selected');
+            item = item[sibling];
+            item.classList.add('selected');
+        }
+        return item;
     }
     show() {
-        this.list.style.removeProperty('display');
+        if (this.list) {
+            this.list.style.removeProperty('display');
+            return this.list;
+        }
+        return this.createList();
     }
     update(suggestions) {
-        const list = this.list;
+        if (!suggestions.length) {
+            return this.hide();
+        }
+        let hasSelected = false;
+        const list = this.show();
+        const selected = list.querySelector('li.selected')?.innerText;
         list.innerHTML = '';
         for (const suggestion of suggestions) {
             const item = document.createElement('li');
             item.dataset.id = '' + suggestion.id;
             item.innerText = suggestion.caption;
+            if (suggestion.caption === selected) {
+                hasSelected = true;
+                item.classList.add('selected');
+            }
             list.appendChild(item);
         }
-        list.firstElementChild?.classList.add('selected');
+        if (!hasSelected) {
+            list.firstElementChild?.classList.add('selected');
+        }
     }
 }

package/package.json

@@ -6,11 +6,13 @@
 	"description": "Editable combobox component featuring smart autocomplete from a list of id-caption pairs for it.rocks",
 	"devDependencies": {
 		"@types/node": "^22.9",
+		"sass": "^1.83",
 		"typescript": "5.6"
 	},
 	"files": [
 		"LICENSE",
 		"README.md",
+		"*.css",
 		"*.d.ts",
 		"*.js"
 	],
@@ -34,9 +36,9 @@
 		"url": "git+https://github.com/itrocks-ts/autocomplete.git"
 	},
 	"scripts": {
-		"build": "tsc"
+		"build": "sass --no-source-map .:. && tsc"
 	},
 	"type": "module",
 	"types": "./autocomplete.d.ts",
-	"version": "0.0.1"
+	"version": "0.0.2"
 }