Variable autocompletion

To have variable autocompletion working in your input you have to provide the variableCompletionsFn prop.

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

• parameter search is the variable name currently being typed
• result string[] is the list of matches

The simplest way to implement this function is to have a list of all variables and then filter it:

.ts

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

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

const filters = createFilters(rootEl, {
  variables,
  variableCompletionsFn: (search) => {
    return variableList.filter((variable) => {
      return variables.includes(search)
    });
  },
});

But you can do all sorts of things, like sorting the list and having the biggest matches be on top:

.ts

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

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

const filters = createFilters(rootEl, {
  variables,
  variableCompletionsFn: (search) => {
    return [...variableList].sort((a, b) => {
      const aVal = a.includes(search) ? 1 : 0;
      const bVal = b.includes(search) ? 1 : 0;

      return bVal - aVal;
    });
  },
});

variables vs variableCompletionsFn

variables prop is a record of variables that has all the names and types of variables that are already typed (at minimum, can be more variables there if you want to). It is used to typecheck already written out variables.

variableCompletionsFn prop is the content of the variable autocompletion list.