@itrocks/autocomplete 0.1.3 → 0.1.5

package/autocomplete.css

@@ -1,30 +1,26 @@
-.combobox input[data-type=object] {
-  display: block;
-}
-.combobox .suggestions {
+.autocomplete + .suggestions {
   background: white;
   border: 1px solid #ddd;
   margin-top: -1px;
   padding: 0;
   position: absolute;
-  top: 100%;
   z-index: 1;
 }
-.combobox .suggestions:empty {
+.autocomplete + .suggestions:empty {
   height: 2em;
   width: 50px;
 }
-.combobox .suggestions > * {
+.autocomplete + .suggestions > * {
   cursor: pointer;
   list-style: none;
   padding: 0.5em 1em;
 }
-.combobox .suggestions > *:hover {
+.autocomplete + .suggestions > *:hover {
   background: #efe;
 }
-.combobox .suggestions > *.selected {
+.autocomplete + .suggestions > *.selected {
   background: #edf;
 }
-.combobox .suggestions > *.selected:hover {
+.autocomplete + .suggestions > *.selected:hover {
   background: #dce;
 }

package/autocomplete.d.ts

@@ -15,6 +15,7 @@ export declare class AutoComplete {
     fetch(): void;
     initIdInput(): HTMLInputElement | undefined;
     initInput(input: HTMLInputElement): HTMLInputElement;
+    initParent(): void;
     keyDown(event: Event): void;
     keyEnter(event: Event): void;
     keyEscape(event: Event): void;
@@ -23,6 +24,8 @@ export declare class AutoComplete {
     onInput(event: Event): void;
     onInputValueChange(): void;
     onKeyDown(event: KeyboardEvent): void;
+    onTouchStart(event: Event): void;
+    openSuggestions(event: Event): boolean;
     select(): void;
     suggest(value?: string): void;
 }

package/autocomplete.js

@@ -11,9 +11,11 @@ export class AutoComplete {
         this.input = this.initInput(input);
         this.idInput = this.initIdInput();
         this.suggestions = new Suggestions(this);
+        this.initParent();
         input.addEventListener('blur', event => this.onBlur(event));
         input.addEventListener('keydown', event => this.onKeyDown(event));
         input.addEventListener('input', event => this.onInput(event));
+        input.addEventListener('touchstart', event => this.onTouchStart(event));
     }
     autoComplete() {
         if (DEBUG)
@@ -112,25 +114,20 @@ export class AutoComplete {
         input.dataset.lastValue = input.value;
         return input;
     }
+    initParent() {
+        const parent = this.input.parentElement;
+        if (!parent)
+            return;
+        parent.style.position = 'relative';
+    }
     keyDown(event) {
         if (DEBUG)
             console.log('keyDown()');
-        const suggestions = this.suggestions;
-        if (!suggestions.length) {
-            this.fetch();
-        }
-        if (!suggestions.isVisible()) {
-            if (suggestions.length > 1) {
-                event.preventDefault();
-                suggestions.show();
-            }
+        if (this.openSuggestions(event))
             return;
-        }
-        event.preventDefault();
-        if (suggestions.isLastSelected()) {
+        if (this.suggestions.isLastSelected())
             return;
-        }
-        this.suggest(suggestions.selectNext()?.caption);
+        this.suggest(this.suggestions.selectNext()?.caption);
     }
     keyEnter(event) {
         if (DEBUG)
@@ -216,7 +213,26 @@ export class AutoComplete {
                 return this.keyEnter(event);
         }
     }
+    onTouchStart(event) {
+        this.openSuggestions(event);
+    }
+    openSuggestions(event) {
+        const suggestions = this.suggestions;
+        if (!suggestions.length) {
+            this.fetch();
+        }
+        if (suggestions.isVisible()) {
+            return false;
+        }
+        if ((suggestions.length > 1) || (!this.input.value.length && suggestions.length)) {
+            event.preventDefault();
+            suggestions.show();
+        }
+        return true;
+    }
     select() {
+        if (DEBUG)
+            console.log('select()');
         const suggestions = this.suggestions;
         const suggestion = suggestions.selected();
         if (!suggestion)
@@ -254,29 +270,22 @@ class Suggestions {
     }
     createList() {
         if (DEBUG)
-            console.log('Suggestions.createList()');
+            console.log('createList()');
         const list = this.list = document.createElement('ul');
         list.classList.add('suggestions');
-        let input = this.combo.input;
-        const idInput = input.nextElementSibling;
-        if ((idInput instanceof HTMLInputElement) && (idInput.type === 'hidden')) {
-            input = idInput;
-        }
-        input.insertAdjacentElement('afterend', list);
-        if (DEBUG)
-            console.log('Suggestions.prepareClic');
+        this.combo.input.insertAdjacentElement('afterend', list);
         list.addEventListener('pointerdown', event => this.onPointerDown(event));
         return list;
     }
     first() {
         if (DEBUG)
-            console.log('Suggestions.first()');
+            console.log('first()');
         const item = this.list?.firstElementChild ?? null;
         return item && { caption: item.innerText, id: +(item.dataset.id ?? 0) };
     }
     hide() {
         if (DEBUG)
-            console.log('Suggestions.hide()');
+            console.log('hide()');
         const list = this.list;
         if (!list)
             return;
@@ -297,7 +306,7 @@ class Suggestions {
     }
     onPointerDown(event) {
         if (DEBUG)
-            console.log('Suggestions.onPointerDown()', event.button);
+            console.log('onPointerDown()', event.button);
         if (event.button !== 0)
             return;
         if (!(event.target instanceof Element))
@@ -317,16 +326,17 @@ class Suggestions {
     }
     removeList() {
         if (DEBUG)
-            console.log('Suggestions.removeList()');
+            console.log('removeList()');
         if (!this.list)
             return;
+        this.length = 0;
         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) });
+            console.log('selected()', item && { caption: item.innerText, id: +(item.dataset.id ?? 0) });
         return item && { caption: item.innerText, id: +(item.dataset.id ?? 0) };
     }
     selectFirst() {
@@ -369,11 +379,16 @@ class Suggestions {
             console.log('show()');
         if (this.list) {
             this.list.style.removeProperty('display');
+            if (!this.list.getAttribute('style')?.length) {
+                this.list.removeAttribute('style');
+            }
             return this.list;
         }
         return this.createList();
     }
     unselect(item = this.list?.querySelector('li.selected')) {
+        if (DEBUG)
+            console.log('unselect()');
         if (!item)
             return;
         const classList = item.classList;

package/package.json

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