@itrocks/autocomplete 0.0.1

package/LICENSE

@@ -0,0 +1,14 @@
+ISC License
+Copyright (C) 2024, Baptiste Pillot <baptiste@pillot.fr>
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
+OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
+CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+[![npm version](https://img.shields.io/npm/v/@itrocks/autocomplete?logo=npm)](https://www.npmjs.org/package/@itrocks/autocomplete)
+[![npm downloads](https://img.shields.io/npm/dm/@itrocks/autocomplete)](https://www.npmjs.org/package/@itrocks/autocomplete)
+[![GitHub](https://img.shields.io/github/last-commit/itrocks-ts/autocomplete?color=2dba4e&label=commit&logo=github)](https://github.com/itrocks-ts/autocomplete)
+[![issues](https://img.shields.io/github/issues/itrocks-ts/autocomplete)](https://github.com/itrocks-ts/autocomplete/issues)
+[![discord](https://img.shields.io/discord/1314141024020467782?color=7289da&label=discord&logo=discord&logoColor=white)](https://25.re/ditr)
+
+# autocomplete
+
+Editable combobox component featuring smart autocomplete from a list of id-caption pairs for it.rocks.

package/autocomplete.d.ts

@@ -0,0 +1,32 @@
+interface HTMLAutoCompleteInputElement extends HTMLInputElement {
+    lastValue: string;
+    selectedValue?: string;
+}
+export declare class AutoComplete {
+    idInput?: HTMLInputElement;
+    input: HTMLAutoCompleteInputElement;
+    suggestions: Suggestions;
+    constructor(input: HTMLInputElement);
+    autoIdInput(): void;
+    emptyClass(): void;
+    fetch(): void;
+    onBlur(_event: FocusEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+    onInput(_event: Event): void;
+}
+declare class Suggestions {
+    combo: AutoComplete;
+    list: HTMLUListElement;
+    constructor(combo: AutoComplete);
+    first(): {
+        caption: string;
+        id: number;
+    };
+    hide(): void;
+    show(): void;
+    update(suggestions: {
+        caption: string;
+        id: number;
+    }[]): void;
+}
+export {};

package/autocomplete.js

@@ -0,0 +1,119 @@
+export class AutoComplete {
+    idInput;
+    input;
+    suggestions;
+    constructor(input) {
+        this.input = Object.assign(input, { lastValue: input.value });
+        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() {
+        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;
+    }
+    emptyClass() {
+        const input = this.input;
+        const classList = input.classList;
+        if (!input.value.length) {
+            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');
+        }
+    }
+    fetch() {
+        const input = this.input;
+        const dataFetch = input.dataset.fetch ?? input.closest('[data-fetch]')?.dataset.fetch;
+        const requestInit = { headers: { Accept: 'application/json' } };
+        const summaryRoute = dataFetch + '?startsWith=' + input.value;
+        fetch(summaryRoute, requestInit).then(response => response.text()).then(json => {
+            const summary = JSON.parse(json);
+            const startsWith = input.value.toLowerCase();
+            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;
+            }
+            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);
+        });
+    }
+    onBlur(_event) {
+        const input = this.input;
+        if (!input.selectedValue)
+            return;
+        input.value = input.selectedValue;
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'Down':
+                return this.suggestions.show();
+            case 'ArrowUp':
+            case 'Up':
+                return this.suggestions.hide();
+        }
+    }
+    onInput(_event) {
+        if (this.input.lastValue === this.input.value) {
+            return;
+        }
+        this.fetch();
+    }
+}
+class Suggestions {
+    combo;
+    list;
+    constructor(combo) {
+        this.combo = combo;
+        const list = this.list = document.createElement('ul');
+        list.classList.add('suggestions');
+        list.style.display = 'none';
+        combo.input.insertAdjacentElement('afterend', list);
+    }
+    first() {
+        const item = this.list.firstElementChild;
+        return { caption: item.innerText, id: +(item.dataset.id ?? 0) };
+    }
+    hide() {
+        this.list.style.display = 'none';
+    }
+    show() {
+        this.list.style.removeProperty('display');
+    }
+    update(suggestions) {
+        const list = this.list;
+        list.innerHTML = '';
+        for (const suggestion of suggestions) {
+            const item = document.createElement('li');
+            item.dataset.id = '' + suggestion.id;
+            item.innerText = suggestion.caption;
+            list.appendChild(item);
+        }
+        list.firstElementChild?.classList.add('selected');
+    }
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+	"author": {
+		"name": "Baptiste Pillot",
+		"email": "baptiste@pillot.fr"
+	},
+	"description": "Editable combobox component featuring smart autocomplete from a list of id-caption pairs for it.rocks",
+	"devDependencies": {
+		"@types/node": "^22.9",
+		"typescript": "5.6"
+	},
+	"files": [
+		"LICENSE",
+		"README.md",
+		"*.d.ts",
+		"*.js"
+	],
+	"homepage": "https://it.rocks",
+	"keywords": [
+		"auto",
+		"autocomplete",
+		"box",
+		"combo",
+		"combobox",
+		"complete",
+		"front-end",
+		"input",
+		"it.rocks"
+	],
+	"license": "ISC",
+	"module": "./autocomplete.js",
+	"name": "@itrocks/autocomplete",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/itrocks-ts/autocomplete.git"
+	},
+	"scripts": {
+		"build": "tsc"
+	},
+	"type": "module",
+	"types": "./autocomplete.d.ts",
+	"version": "0.0.1"
+}