How to setup autocomplete

[avin-kavish]

I saw this snippet on SO for setting up SQL auto-complete with table names and columns.

CodeMirror.commands.autocomplete = function(cm) {
    CodeMirror.showHint(cm, CodeMirror.hint.sql, { 
        tables: {
            "table1": [ "col_A", "col_B", "col_C" ],
            "table2": [ "other_columns1", "other_columns2" ]
        }
    } );
}

Can I do the same with the react version?

[jaywcjlove]

@avin-kavish https://codemirror.net/examples/autocompletion/

[avin-kavish]

I mean in the react version.

[jaywcjlove]

@avin-kavish The method of use is the same.

<CodeMirror
  value="console.log('hello world!');"
  height="200px"
+  extensions={[
+    //.... Set it here
+  ]}
  onChange={onChange}
 />

[jaywcjlove]

@codercoin98 Example: https://codesandbox.io/embed/vibrant-marco-p8znlj?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { autocompletion } from "@codemirror/autocomplete";

// Our list of completions (can be static, since the editor
/// will do filtering based on context).
const completions = [
  { label: "panic", type: "keyword" },
  { label: "park", type: "constant", info: "Test completion" },
  { label: "password", type: "variable" }
];

function myCompletions(context) {
  let before = context.matchBefore(/\w+/);
  // If completion wasn't explicitly started and there
  // is no word before the cursor, don't open completions.
  if (!context.explicit && !before) return null;
  return {
    from: before ? before.from : context.pos,
    options: completions,
    validFor: /^\w*$/
  };
}

function App() {
  const [value, setValue] = React.useState("// Type a 'p'\n");
  const onChange = React.useCallback((val, viewUpdate) => {
    console.log("val:", val);
    setValue(val);
  }, []);
  return (
    <CodeMirror
      value={value}
      height="200px"
      extensions={[autocompletion({ override: [myCompletions] })]}
      onChange={onChange}
    />
  );
}

export default App;

• https://github.com/uiwjs/react-codemirror/issues/579#issuecomment-1732270138

[Swat009]

I think this was the intend of the question

import { sql } from "@codemirror/lang-sql";

<CodeMirror
  value={command}
  extensions={[
    sql({
      schema: {
        "customers": ['abc', 'efg'],
        "table1": ['hij', 'klm'],
        "table2": [],
        "str.table4": ['sadad'],
      },
    })
  ]}
/>