Differences

This shows you the differences between two versions of the page.

--- scripting:examples:code-completion [2018/06/18 00:24] – [Subscribing on onCompletion event] admin
+++ scripting:examples:code-completion [2018/06/18 00:47] (current) – [Usage of CompletionSet and CompletionItem] admin
@@ Line 45: / Line 45: @@
 ==== Subscribing on onCompletion event  ====
 If you want to take full control over the completion process, you can subscribe to [[scripting:api:script-application:on-completion|onCompletion]] event and decide by yourself, what shall be the result of the event.\\
-It can be display of pre-filled Completion List or maybe, some special dialog or other UI.
+It can be a display of pre-filled Completion List or maybe, some special dialog or other UI.
 Be aware, that [[scripting:api:script-application:on-completion|onCompletion]] event called for any syntax, so, if you want to limit your code completion to only some specific programming language, you need to implement filtering in the event code by yourself.
@@ Line 54: / Line 54: @@
 	if ( ActiveDocument.Syntax.IsInheritedFrom("js") ) {
                 // simplest, just pass a list of strings
-		var aSuggestions = ["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9", "Item10"];
+		var aSuggestions = ["Item1", "Item2", "Item3", "Item4", "Item5"];
 		this.ShowCompletionList(selection, aSuggestions, false);
 		return true; // event is handled
@@ Line 71: / Line 71: @@
                 // add as a string
                 completion_set.Add("Variable1");
-                // add as a completion item (to refer style you can use relative syntax e.g. "variable", absolute "js:method")
+                // add as a completion item. To refer style you can use relative syntax e.g. "variable",
-                // or at all pass Syntax object directly
+                // absolute "js:method" or at all pass Syntax object directly
                 completion_set.Add(CompletionItem("Variable2", "js:methods"));
 		this.ShowCompletionList(selection, completion_set, true);
@@ Line 81: / Line 81: @@
 };</file>
+==== Usage of CompletionSet and CompletionItem  ====
+When you construct [[scripting:api:completion-set:start|CompletionSet]], you can initialize an object by another [[scripting:api:completion-set:start|CompletionSet]] object (items would be copied) or by JS array with strings or CompletionItems.
 <code javascript>
-////////////////////////////////////////////////////////////////////////
+var completion_set = CompletionSet([
-// Register Code Completion Handler
+CompletionItem("Item1", "js:methods"),
-Application.onCompletion = function(/*IRange*/ selection ) {
+CompletionItem("Item2", "variable"),
-	if ( ActiveDocument.Syntax.IsInheritedFrom("js") ) {
+CompletionItem("Item3")
-		//var aSuggestions = ["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9", "Item10"];
+]);
-		//this.ShowCompletionList(selection, aSuggestions, false);
+// or
-		var item5 = CompletionItem("Item5");
+var completion_set2 = CompletionSet(["Item1", "Item2", "Item3"]);
-		item5.Pattern = "%CurrentWord%(%|%)";
+</code>
-		item5.onDescription = function () { return this.Text + "() ..."; };
-		var item6 = CompletionItem("Item6");
+<note important>Do not mix strings and CompletionItems in the same set - it is not supported, and editor will use a type of first object</note>
-		item6.onExpand = onExpand;
-		item6.SubMenu = true;
+If you need more customization of your item displayed in CompletionList, there are several options you can use when constructing explicit [[scripting:api:completion-item:start|CompletionItem]] and passing it to the list.
-		var aSuggestions = [CompletionItem("Item1", "js:methods"), CompletionItem("Item2", "variable"), CompletionItem("Item3"), CompletionItem("Item4", null, 11, 1, "Item4 Description", onExpand), item5, item6];
+<code javascript>
-		var completion_set = CompletionSet(aSuggestions);
+var item5 = CompletionItem("Item5");
-		this.ShowCompletionList(selection, completion_set, true);
+// custom insetion pattern, with code template syntax.
-		return true; // processed
+// %CurrentWord% - inserted text
-	}
+item5.Pattern = "%CurrentWord%(%|%)";
+// custom description tooltip, shown when user scrolls over items and stops on one of them
-	return false;
+item5.onDescription = function () { return this.Text + "() ..."; };
-};</code>
+function onExpand(view, selection) {
+	ActiveDocument.ReplaceText(selection, this.Text + "(...)");
+}
+var item6 = CompletionItem("Item6");
+// adding of custom handler, which is called when item is selected and inserted
+// default, inserts item Text property
+item6.onExpand = onExpand;
+// add small arrow icon on the right of the item, indicating that items expands
+item6.SubMenu = true;
+var aSuggestions = [
+// add completion items with text and style, from which color/image/style of item shall be derived
+CompletionItem("Item1", "js:methods"),
+CompletionItem("Item2", "variable"),
+// use default style for item display
+CompletionItem("Item3"),
+// define an item witthout style, but with explicit image, subimage (public/protected/private)
+// description and selection call-back
+CompletionItem("Item4", null, 11, 1, "Item4 Description", onExpand),
+item5,
+item6];
+</code>