@codemirror/autocomplete

@codemirror/autocomplete

[ WEBSITE | DOCS | ISSUES | FORUM | CHANGELOG ]

This package implements autocompletion for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Usage

import {EditorView} from "@codemirror/view"
import {autocompletion} from "@codemirror/autocomplete"
import {jsonLanguage} from "@codemirror/lang-json"

const view = new EditorView({
  parent: document.body,
  extensions: [
    jsonLanguage,
    autocompletion(),
    jsonLanguage.data.of({
      autocomplete: ["id", "name", "address"]
    })
  ]
})

This configuration will just complete the given words anywhere in JSON context. Most language modules come with more refined autocompletion built-in, but you can also write your own custom autocompletion sources and associate them with your language this way.

Similar packages

Other packages similar to @codemirror/autocomplete

monaco-editor

The Monaco Editor is the code editor that powers VS Code, which comes with built-in autocompletion features. It is a full-featured editor with a rich API for customization, including autocompletion, but it is a standalone editor rather than a plugin.

jquery-textcomplete

A jQuery plugin for autocompletion. Unlike @codemirror/autocomplete, which is designed for code editors, jquery-textcomplete is more general-purpose and can be used for any text input field.