@itrocks/autocomplete 0.0.6 → 0.0.7

package/autocomplete.css

@@ -8,6 +8,7 @@
   margin-top: -1px;
   padding: 0;
   position: absolute;
+  z-index: 1;
 }
 .combobox .suggestions:empty {
   height: 2em;

package/autocomplete.d.ts

@@ -19,7 +19,7 @@ export declare class AutoComplete {
     keyEscape(event: KeyboardEvent): void;
     keyUp(event: KeyboardEvent): void;
     onBlur(_event: FocusEvent): void;
-    onInput(_event: Event): void;
+    onInput(event: Event): void;
     onInputValueChange(): void;
     onKeyDown(event: KeyboardEvent): void;
     suggest(value?: string): void;

package/autocomplete.js

@@ -55,12 +55,13 @@ export class AutoComplete {
         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;
+        const summaryRoute = dataFetch + (input.value ? ('?startsWith=' + input.value) : '');
         fetch(summaryRoute, requestInit).then(response => response.text()).then(json => {
-            const summary = JSON.parse(json);
+            const summary = JSON.parse(json).map(([id, caption]) => ({ caption, id: +id }));
             const startsWith = input.value.toLowerCase();
-            const suggestions = summary.map(([id, caption]) => ({ caption, id: +id }))
-                .filter(item => item.caption.toLowerCase().startsWith(startsWith));
+            const suggestions = startsWith.length
+                ? summary.filter(item => item.caption.toLowerCase().startsWith(startsWith))
+                : summary;
             this.suggestions.update(suggestions);
             if (!['Backspace', 'Delete'].includes(lastKey)) {
                 this.autoComplete();
@@ -83,6 +84,9 @@ export class AutoComplete {
     }
     keyDown(event) {
         const suggestions = this.suggestions;
+        if (!suggestions.length) {
+            this.fetch();
+        }
         if (!suggestions.isVisible()) {
             if (suggestions.length > 1) {
                 event.preventDefault();
@@ -140,10 +144,11 @@ export class AutoComplete {
     onBlur(_event) {
         setTimeout(() => this.suggestions.removeList());
     }
-    onInput(_event) {
-        if (this.input.dataset.lastValue === this.input.value) {
+    onInput(event) {
+        if (document.activeElement !== event.target)
+            return;
+        if (this.input.dataset.lastValue === this.input.value)
             return;
-        }
         this.fetch();
     }
     onInputValueChange() {

package/package.json

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