feat: Implement autocomplete feature with enhanced UI and tooltip support

- Added AutoComplete class to handle input suggestions based on user input.
- Integrated TextAreaCaretHelper for accurate positioning of the dropdown.
- Enhanced dropdown styling with a new color scheme and custom scrollbar.
- Implemented dynamic loading of preview tooltips for selected items.
- Added keyboard navigation support for dropdown items.
- Included functionality to insert selected items into the input field with usage tips.
- Created a separate TextAreaCaretHelper module for managing caret position calculations.

web/comfyui/lora_loader.js

@@ -5,7 +5,8 @@ import {
     collectActiveLorasFromChain,
     updateConnectedTriggerWords,
     chainCallback,
-    mergeLoras
+    mergeLoras,
+    setupInputWidgetWithAutocomplete
 } from "./utils.js";
 import { addLorasWidget } from "./loras_widget.js";
 
@@ -158,7 +159,8 @@ app.registerExtension({
             const inputWidget = this.widgets[0];
             inputWidget.options.getMaxHeight = () => 100;
             this.inputWidget = inputWidget;
-            inputWidget.callback = (value) => {
+            
+            const originalCallback = (value) => {
               if (isUpdating) return;
               isUpdating = true;
 
@@ -172,6 +174,9 @@ app.registerExtension({
               }
             };
 
+            // Setup input widget with autocomplete
+            inputWidget.callback = setupInputWidgetWithAutocomplete(this, inputWidget, originalCallback);
+
             // Register this node with the backend
             this.registerNode = async () => {
               try {