Geertjan's Blog

  • June 20, 2015

Code Completion Context for JavaScript Editors

Geertjan Wielenga
Product Manager

You don't want the items in your code completion box extension to appear regardless of context. For example, Kendo UI components should only appear in the code completion box after the dot in this kind of structure:

For that reason, the org.netbeans.modules.javascript2.editor.spi.CompletionContext class exists.

It provides String constants that you can use to limit the appearance of your items to the context to which they apply.

Usage is simple. For example, look at the code in bold below. That's all I needed to do to cause the Kendo UI components that you see above to appear only in the place in the statement that you see above.

public List<CompletionProposal> complete(
CodeCompletionContext ccContext,
CompletionContext jsCompletionContext,
String string) {if (jsCompletionContext != CompletionContext.OBJECT_PROPERTY) {
return Collections.EMPTY_LIST;

List<CompletionProposal> result = new ArrayList<CompletionProposal>();
Set<DemoDataItem> data = getData();
for (DemoDataItem item : data) {
result.add(DemoCompletionProposal.createDemoItem(item, 0));
return result;

In the next example, I want the Kendo UI options to appear for the related Kendo UI component and only within the braces of the statement, as shown below. Getting directly into the braces is a bit more work, but changing the code above to CompletionContext.OBJECT_PROPERTY_NAME is the starting point for getting the items within the code completion box only within the parentheses.

For a good example, take a look at the switch statement in this piece of code by Tim Boudreau.

The richness of these APIs holds the tremendous promise for NetBeans to be the meeting point of all imaginable JavaScript frameworks and libraries.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.