🤖 Merge PR DefinitelyTyped#73377 jsoneditor: Enhance autocomplete object option support by @ahmed-saber

Co-authored-by: Ahmed Saber <ahmed.ali@semrush.com>

Author: ahmed-saber

types/jsoneditor/index.d.ts

@@ -77,7 +77,28 @@ export interface Template {
     value: any;
 }
 
-export type AutoCompleteCompletion = null | string[] | { startFrom: number; options: string[] };
+export interface AutoCompleteOption {
+    /**
+     * The display text for the autocomplete option
+     */
+    text?: string;
+    /**
+     * The value to be used when the option is selected
+     */
+    value: string;
+    /**
+     * Additional properties are allowed for custom metadata or future extensibility.
+     * These properties will be preserved but ignored by the current JSONEditor implementation.
+     */
+    [key: string]: any;
+}
+
+export type AutoCompleteOptionItem = string | AutoCompleteOption;
+
+export type AutoCompleteCompletion = null | AutoCompleteOptionItem[] | {
+    startFrom: number;
+    options: AutoCompleteOptionItem[];
+};
 
 export type AutoCompleteMatchingStrategy = "start" | "contain";
 
@@ -98,7 +119,10 @@ export interface AutoCompleteOptions {
      * - 'start': Match your input from the start, e.g. 'ap' matches 'apple' but 'pl' does not.
      * - 'contain': Contains the user's input or not, e.g. 'pl' matches 'apple' too.
      */
-    filter?: AutoCompleteMatchingStrategy | ((query: string) => boolean) | undefined;
+    filter?:
+        | AutoCompleteMatchingStrategy
+        | ((query: string, match: AutoCompleteOptionItem, config: AutoCompleteOptions) => boolean)
+        | undefined;
     /**
      * Indicate the way to trigger autocomplete menu.
      * - 'keydown': When you type something in the field or value, it will trigger autocomplete immediately.

types/jsoneditor/jsoneditor-tests.ts

@@ -13,9 +13,67 @@ autocomplete.filter = undefined;
 autocomplete.filter = "start";
 autocomplete.filter = "contain";
 autocomplete.filter = input => true;
+autocomplete.filter = (query, match, config) => true;
 
 autocomplete.getOptions = undefined;
 autocomplete.getOptions = (text, path, type, editor) => [];
+autocomplete.getOptions = (text, path, type, editor) => ["string1", "string2"];
+autocomplete.getOptions = (text, path, type, editor) => [{ text: "Display Text", value: "actual_value" }];
+autocomplete.getOptions = (text, path, type, editor) => [
+    "string_option",
+    { text: "Object Option", value: "object_value" },
+    { text: "Object with text only", value: "object_text_only" },
+];
+autocomplete.getOptions = (text, path, type, editor) => ({ startFrom: 0, options: ["option1", "option2"] });
+autocomplete.getOptions = (text, path, type, editor) => ({
+    startFrom: 0,
+    options: [{ text: "Display", value: "val" }],
+});
+autocomplete.getOptions = (text, path, type, editor) => new Promise(() => ["async1", "async2"]);
+autocomplete.getOptions = (text, path, type, editor) =>
+    new Promise(() => [{ text: "Async Option", value: "async_val" }]);
+
+// Test getOptions with extended AutoCompleteOption properties
+autocomplete.getOptions = (text, path, type, editor) => [
+    "simple_string",
+    {
+        text: "Premium Feature",
+        value: "premium_val",
+        category: "premium",
+        icon: "star",
+        description: "This is a premium feature",
+    },
+    {
+        text: "Advanced Option",
+        value: "advanced_val",
+        metadata: { id: 123, priority: "high" },
+        customData: { anything: "custom" },
+    },
+];
+
+autocomplete.getOptions = (text, path, type, editor) => ({
+    startFrom: 0,
+    options: [
+        "basic_option",
+        {
+            text: "Extended Option",
+            value: "ext_val",
+            tooltip: "Additional information",
+            disabled: false,
+            group: "category1",
+        },
+    ],
+});
+
+autocomplete.getOptions = (text, path, type, editor) =>
+    Promise.resolve([
+        {
+            text: "Async Extended",
+            value: "async_ext",
+            category: "async",
+            metadata: { loadTime: Date.now() },
+        },
+    ]);
 
 autocomplete.trigger = undefined;
 autocomplete.trigger = "keydown";