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/wanvideo_lora_select.js

@@ -4,7 +4,8 @@ import {
     getActiveLorasFromNode,
     updateConnectedTriggerWords,
     chainCallback,
-    mergeLoras
+    mergeLoras,
+    setupInputWidgetWithAutocomplete
 } from "./utils.js";
 import { addLorasWidget } from "./loras_widget.js";
 
@@ -80,7 +81,8 @@ app.registerExtension({
                 const inputWidget = this.widgets[1];
                 inputWidget.options.getMaxHeight = () => 100;
                 this.inputWidget = inputWidget;
-                inputWidget.callback = (value) => {
+                // Wrap the callback with autocomplete setup
+                const originalCallback = (value) => {
                     if (isUpdating) return;
                     isUpdating = true;
                     
@@ -97,6 +99,7 @@ app.registerExtension({
                         isUpdating = false;
                     }
                 };
+                inputWidget.callback = setupInputWidgetWithAutocomplete(this, inputWidget, originalCallback);
             });
         }
     },