@itrocks/autocomplete 0.1.0 → 0.1.2

package/autocomplete.d.ts

@@ -3,6 +3,7 @@ interface Item {
     id: number;
 }
 export declare class AutoComplete {
+    fetching?: string;
     idInput?: HTMLInputElement;
     input: HTMLInputElement;
     lastKey: string;
@@ -14,14 +15,15 @@ export declare class AutoComplete {
     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;
+    keyDown(event: Event): void;
+    keyEnter(event: Event): void;
+    keyEscape(event: Event): void;
+    keyUp(event: Event): void;
+    onBlur(_event: Event): void;
     onInput(event: Event): void;
     onInputValueChange(): void;
     onKeyDown(event: KeyboardEvent): void;
+    select(): void;
     suggest(value?: string): void;
 }
 declare class Suggestions {
@@ -35,6 +37,7 @@ declare class Suggestions {
     isFirstSelected(): boolean | null | undefined;
     isLastSelected(): boolean | null | undefined;
     isVisible(): boolean | undefined;
+    onPointerDown(event: MouseEvent): void;
     removeList(): void;
     selected(item?: HTMLLIElement | null): Item | null;
     selectFirst(): void;
@@ -42,6 +45,7 @@ declare class Suggestions {
     selectPrevious(): Item | null;
     selectSibling(sibling: 'nextElementSibling' | 'previousElementSibling'): HTMLLIElement | null;
     show(): HTMLUListElement;
+    unselect(item?: HTMLLIElement | null | undefined): void;
     update(suggestions: Item[]): void;
 }
 export {};

package/autocomplete.js

@@ -1,9 +1,13 @@
+const DEBUG = false;
 export class AutoComplete {
+    fetching;
     idInput;
     input;
     lastKey = '';
     suggestions;
     constructor(input) {
+        if (DEBUG)
+            console.log('new AutoComplete()', input);
         this.input = this.initInput(input);
         this.idInput = this.initIdInput();
         this.suggestions = new Suggestions(this);
@@ -12,6 +16,8 @@ export class AutoComplete {
         input.addEventListener('input', event => this.onInput(event));
     }
     autoComplete() {
+        if (DEBUG)
+            console.log('autoComplete()', this);
         const input = this.input;
         if (input.selectionStart !== input.value.length) {
             return;
@@ -29,9 +35,13 @@ export class AutoComplete {
         input.setSelectionRange(position, input.value.length);
     }
     autoEmptyClass() {
+        if (DEBUG)
+            console.log('autoEmptyClass()', this.input.value);
         const input = this.input;
         const classList = input.classList;
         if (input.value === '') {
+            if (DEBUG)
+                console.log('  + empty');
             classList.add('empty');
             return;
         }
@@ -41,6 +51,8 @@ export class AutoComplete {
         }
     }
     autoIdInputValue() {
+        if (DEBUG)
+            console.log('autoIdInputValue', this.suggestions.selected());
         const idInput = this.idInput;
         if (!idInput)
             return;
@@ -49,16 +61,31 @@ export class AutoComplete {
         idInput.value = (suggestion && (toInsensitive(input.value) === toInsensitive(suggestion.caption)))
             ? '' + suggestion.id
             : '';
+        if (DEBUG)
+            console.log('  idInput =', idInput.value);
     }
     fetch() {
         const input = this.input;
+        const inputValue = ((input.selectionStart !== null) && (input.selectionEnd === input.value.length))
+            ? input.value.slice(0, input.selectionStart)
+            : input.value;
+        if (this.fetching) {
+            if (inputValue !== this.fetching) {
+                setTimeout(() => this.fetch(), 50);
+            }
+            return;
+        }
+        this.fetching = inputValue;
         const dataFetch = input.dataset.fetch ?? input.closest('[data-fetch]')?.dataset.fetch;
         const lastKey = this.lastKey;
         const requestInit = { headers: { Accept: 'application/json' } };
-        const summaryRoute = dataFetch + (input.value ? ('?startsWith=' + input.value) : '');
+        const summaryRoute = dataFetch + (inputValue ? ('?startsWith=' + inputValue) : '');
+        if (DEBUG)
+            console.log('fetch()', 'startsWith=' + inputValue);
         fetch(summaryRoute, requestInit).then(response => response.text()).then(json => {
+            this.fetching = undefined;
             const summary = JSON.parse(json).map(([id, caption]) => ({ caption, id: +id }));
-            const startsWith = toInsensitive(input.value);
+            const startsWith = toInsensitive(inputValue);
             const suggestions = startsWith.length
                 ? summary.filter(item => toInsensitive(item.caption).startsWith(startsWith))
                 : summary;
@@ -68,6 +95,9 @@ export class AutoComplete {
             }
             this.onInputValueChange();
             this.autoIdInputValue();
+        }).catch(() => {
+            this.fetching = undefined;
+            setTimeout(() => this.fetch(), 100);
         });
     }
     initIdInput() {
@@ -83,6 +113,8 @@ export class AutoComplete {
         return input;
     }
     keyDown(event) {
+        if (DEBUG)
+            console.log('keyDown()');
         const suggestions = this.suggestions;
         if (!suggestions.length) {
             this.fetch();
@@ -101,21 +133,17 @@ export class AutoComplete {
         this.suggest(suggestions.selectNext()?.caption);
     }
     keyEnter(event) {
+        if (DEBUG)
+            console.log('keyEnter()');
         const suggestions = this.suggestions;
-        if (!suggestions.isVisible()) {
+        if (!suggestions.isVisible())
             return;
-        }
         event.preventDefault();
-        const suggestion = suggestions.selected();
-        if (!suggestion) {
-            return;
-        }
-        this.input.value = suggestion.caption;
-        this.onInputValueChange();
-        this.autoIdInputValue();
-        suggestions.hide();
+        this.select();
     }
     keyEscape(event) {
+        if (DEBUG)
+            console.log('keyEscape');
         const suggestions = this.suggestions;
         if ((this.input.value === '') && !suggestions.isVisible()) {
             return;
@@ -125,11 +153,15 @@ export class AutoComplete {
             suggestions.hide();
             return;
         }
+        if (DEBUG)
+            console.log('input.value =');
         this.input.value = '';
         this.onInputValueChange();
         this.autoIdInputValue();
     }
     keyUp(event) {
+        if (DEBUG)
+            console.log('keyUp()');
         const suggestions = this.suggestions;
         if (!suggestions.isVisible()) {
             return;
@@ -142,9 +174,13 @@ export class AutoComplete {
         this.suggest(suggestions.selectPrevious()?.caption);
     }
     onBlur(_event) {
-        setTimeout(() => this.suggestions.removeList());
+        if (DEBUG)
+            console.log('onBlur()');
+        this.suggestions.removeList();
     }
     onInput(event) {
+        if (DEBUG)
+            console.log('onInput()');
         if (document.activeElement !== event.target)
             return;
         if (this.input.dataset.lastValue === this.input.value)
@@ -152,6 +188,8 @@ export class AutoComplete {
         this.fetch();
     }
     onInputValueChange() {
+        if (DEBUG)
+            console.log('onInputValueChange()');
         this.input.dataset.lastValue = this.input.value;
         this.input.dispatchEvent(new Event('input', { bubbles: true }));
         if (document.activeElement !== this.input) {
@@ -162,6 +200,8 @@ export class AutoComplete {
         this.autoEmptyClass();
     }
     onKeyDown(event) {
+        if (DEBUG)
+            console.log('onKeyDown()', event.key);
         this.lastKey = event.key;
         switch (event.key) {
             case 'ArrowDown':
@@ -176,12 +216,28 @@ export class AutoComplete {
                 return this.keyEnter(event);
         }
     }
+    select() {
+        const suggestions = this.suggestions;
+        const suggestion = suggestions.selected();
+        if (!suggestion)
+            return;
+        if (DEBUG)
+            console.log('  input =', suggestion.caption);
+        this.input.value = suggestion.caption;
+        this.onInputValueChange();
+        this.autoIdInputValue();
+        suggestions.hide();
+    }
     suggest(value) {
+        if (DEBUG)
+            console.log('suggest()', value);
         if (typeof value !== 'string') {
             return;
         }
         const input = this.input;
         const position = input.selectionStart;
+        if (DEBUG)
+            console.log('  input =', input.value);
         input.value = value;
         input.setSelectionRange(position, input.value.length);
         this.autoComplete();
@@ -197,6 +253,8 @@ class Suggestions {
         this.combo = combo;
     }
     createList() {
+        if (DEBUG)
+            console.log('Suggestions.createList()');
         const list = this.list = document.createElement('ul');
         list.classList.add('suggestions');
         let input = this.combo.input;
@@ -205,13 +263,20 @@ class Suggestions {
             input = idInput;
         }
         input.insertAdjacentElement('afterend', list);
+        if (DEBUG)
+            console.log('Suggestions.prepareClic');
+        list.addEventListener('pointerdown', event => this.onPointerDown(event));
         return list;
     }
     first() {
+        if (DEBUG)
+            console.log('Suggestions.first()');
         const item = this.list?.firstElementChild ?? null;
         return item && { caption: item.innerText, id: +(item.dataset.id ?? 0) };
     }
     hide() {
+        if (DEBUG)
+            console.log('Suggestions.hide()');
         const list = this.list;
         if (!list)
             return;
@@ -230,47 +295,98 @@ class Suggestions {
     isVisible() {
         return this.list && (this.list.style.display !== 'none');
     }
+    onPointerDown(event) {
+        if (DEBUG)
+            console.log('Suggestions.onPointerDown()', event.button);
+        if (event.button !== 0)
+            return;
+        if (!(event.target instanceof Element))
+            return;
+        const item = event.target.closest('.suggestions > li');
+        const list = this.list;
+        if (DEBUG)
+            console.log('  item', item, 'list', list);
+        if (!item || !list)
+            return;
+        if (DEBUG)
+            console.log('  select', item);
+        this.unselect();
+        item.classList.add('selected');
+        this.combo.select();
+        event.preventDefault();
+    }
     removeList() {
-        this.list?.remove();
+        if (DEBUG)
+            console.log('Suggestions.removeList()');
+        if (!this.list)
+            return;
+        this.list.remove();
         this.list = undefined;
     }
     selected(item = null) {
         item ??= this.list?.querySelector('li.selected') ?? null;
+        if (DEBUG)
+            console.log('Suggestions.selected()', item && { caption: item.innerText, id: +(item.dataset.id ?? 0) });
         return item && { caption: item.innerText, id: +(item.dataset.id ?? 0) };
     }
     selectFirst() {
+        if (DEBUG)
+            console.log('selectFirst()', this.list?.firstElementChild);
         const list = this.list;
         if (!list)
             return;
-        list.querySelector('li.selected')?.classList.remove('selected');
+        this.unselect();
         list.firstElementChild?.classList.add('selected');
     }
     selectNext() {
+        if (DEBUG)
+            console.log('selectNext()');
         return this.selected(this.selectSibling('nextElementSibling'));
     }
     selectPrevious() {
+        if (DEBUG)
+            console.log('selectPrevious()');
         return this.selected(this.selectSibling('previousElementSibling'));
     }
     selectSibling(sibling) {
+        if (DEBUG)
+            console.log('selectSibling()');
         const list = this.list;
         if (!list)
             return null;
         let item = list.querySelector('li.selected');
         if (item && item[sibling]) {
-            item.classList.remove('selected');
+            this.unselect(item);
             item = item[sibling];
             item.classList.add('selected');
         }
+        if (DEBUG)
+            console.log(' ', item);
         return item;
     }
     show() {
+        if (DEBUG)
+            console.log('show()');
         if (this.list) {
             this.list.style.removeProperty('display');
             return this.list;
         }
         return this.createList();
     }
+    unselect(item = this.list?.querySelector('li.selected')) {
+        if (!item)
+            return;
+        const classList = item.classList;
+        if (!classList)
+            return;
+        classList.remove('selected');
+        if (!classList.length) {
+            item.removeAttribute('class');
+        }
+    }
     update(suggestions) {
+        if (DEBUG)
+            console.log('update()');
         let hasSelected = false;
         const list = this.list ?? this.createList();
         const selected = list.querySelector('li.selected')?.innerText;

package/package.json

@@ -40,5 +40,5 @@
 	},
 	"type": "module",
 	"types": "./autocomplete.d.ts",
-	"version": "0.1.0"
+	"version": "0.1.2"
 }