@modernman00/shared-js-lib 1.2.61 → 1.2.63

package/config/version.php

@@ -1,3 +1,3 @@
 <?php
-define('APP_VERSION', 'v1.2.61');
+define('APP_VERSION', 'v1.2.63');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modernman00/shared-js-lib",
-  "version": "1.2.61",
+  "version": "1.2.63",
   "description": "Reusable JS utilities for numerous js problems",
   "homepage": "https://github.com/modernman00/shared-js-lib#readme",
   "keywords": [
@@ -44,6 +44,7 @@
     "Utility.js",
     "UtilityHtml.js",
     "axiosWrapper.js",
+    "theAutoComplete.js",
     "general.js",
     "config/",
     "README.md",

package/release-history.md

@@ -41,3 +41,15 @@
 - 🧹 Auto-commit before release _(by modernman00)_
 - 🧹 Auto-commit before release _(by modernman00)_
 - 🧹 Auto-commit before release _(by modernman00)_
+
+## v1.2.62 — 2026-01-27 09:57
+### Changelog for v1.2.62
+
+- 🔖 Bump version to v1.2.62 _(by modernman00)_
+- 🧹 Auto-commit before release _(by modernman00)_
+
+## v1.2.63 — 2026-01-27 10:04
+### Changelog for v1.2.63
+
+- 🔖 Bump version to v1.2.63 _(by modernman00)_
+- 🧹 Auto-commit before release _(by modernman00)_

package/theAutoComplete.js

@@ -0,0 +1,93 @@
+import { id } from './UtilityHtml.js'
+
+/**
+ * 
+ * @param {string} inputId 
+ * @param {Array} arr 
+ */
+
+/**
+ * Sets up an autocomplete functionality for an input element.
+ *
+ * @param {string} inputId - The ID of the input element to attach the autocomplete to.
+ * @param {Array<string>} arr - An array of strings containing the autocomplete suggestions.
+ *
+ * The function converts all strings in the array to lowercase for case-insensitive matching.
+ * It initializes the autocomplete with the given input element and array of suggestions,
+ * providing real-time suggestions based on user input. On selecting a suggestion,
+ * it populates the input element with the selected suggestion. very good
+ */
+export const autocomplete = (inputId, arr) => {
+    const whatToBuyInput = id(inputId); // Get the text input
+    if (whatToBuyInput) {
+  // Create a <ul> for autocomplete suggestions
+  const suggestionList = document.createElement("ul");
+  suggestionList.classList.add("autocomplete-suggestions");
+  suggestionList.id = "suggestions"; // For accessibility
+  whatToBuyInput.parentElement.appendChild(suggestionList); // Append to input's parent
+
+  // Function to show matching suggestions based on user input
+  const showSuggestions = (inputValue) => {
+    suggestionList.innerHTML = ""; // Clear previous suggestions
+    if (!inputValue) return; // Exit if input is empty
+
+    // Filter items that match the input (case-insensitive), limit to 8
+    const matches = arr
+      .filter(item => item.toLowerCase().includes(inputValue.toLowerCase()))
+      .slice(0, 8);
+
+    // Create <li> for each match
+    matches.forEach((item, index) => {
+      const li = document.createElement("li");
+      li.textContent = item;
+      li.setAttribute("tabindex", "0"); // Make focusable for keyboard
+      li.setAttribute("data-index", index); // Store index for navigation
+      li.addEventListener("click", () => {
+        whatToBuyInput.value = item; // Set input value on click
+        suggestionList.innerHTML = ""; // Clear suggestions
+      });
+      li.addEventListener("keypress", (e) => {
+        if (e.key === "Enter") {
+          whatToBuyInput.value = item; // Set input value on Enter
+          suggestionList.innerHTML = ""; // Clear suggestions
+        }
+      });
+      suggestionList.appendChild(li);
+    });
+  };
+
+  // Show suggestions as user types
+  whatToBuyInput.addEventListener("input", (e) => {
+    showSuggestions(e.target.value);
+  });
+
+  // Clear suggestions on blur (with delay for click to register)
+  whatToBuyInput.addEventListener("blur", () => {
+    setTimeout(() => suggestionList.innerHTML = "", 200);
+  });
+
+  // Handle keyboard navigation for suggestions
+  whatToBuyInput.addEventListener("keydown", (e) => {
+    const suggestions = suggestionList.querySelectorAll("li");
+    if (!suggestions.length) return; // Exit if no suggestions
+
+    let focusedIndex = Array.from(suggestions).findIndex(li => li === document.activeElement);
+    if (e.key === "ArrowDown") {
+      e.preventDefault(); // Prevent cursor movement
+      focusedIndex = (focusedIndex + 1) % suggestions.length; // Loop to start
+      suggestions[focusedIndex].focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      focusedIndex = (focusedIndex - 1 + suggestions.length) % suggestions.length; // Loop to end
+      suggestions[focusedIndex].focus();
+    } else if (e.key === "Enter" && focusedIndex >= 0) {
+      e.preventDefault();
+      whatToBuyInput.value = suggestions[focusedIndex].textContent; // Select item
+      suggestionList.innerHTML = ""; // Clear suggestions
+    } else if (e.key === "Escape") {
+      suggestionList.innerHTML = ""; // Clear suggestions
+    }
+  });
+}
+}
+