Value autocompletion

To have value autocompletion working in your input you have to provide the valueCompletionsFn prop.

The type of the prop is (search: string, variable: string) => string[]:

• parameter search is the value currently being typed (NOTE: it includes " characters for strings)
• parameter variable is the name of the variable
• result string[] is the list of suggested values

Example:

.ts

const variables = {
  "x": string(),
  "y": integer(),
};

// ["x", "y"]
const variableList = Object.keys(variables);

const filters = createFilters(rootEl, {
  variables,
  valueCompletionsFn: (search, variable) => {
    if (variable === "x") {
      // "one", "two", "three" are the values that will show up on the autocompletion list
      // that will be further filtered out by search
      return ['"one"', '"two"', '"three"'].filter((value) => value.includes(search));
    } else if (variable === "y" && Number.isInteger(Number(search))) {
      // y is an integer, just copy the number back if it is also an integer
      return [search];
    }

    return [];
  },
});

Check also Variable types and Variable autocompletion for context about variables.