Differences

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

--- scripting:examples:code-completion [2018/06/18 00:38] – [Usage of CompletionSet and CompletionItem] admin
+++ scripting:examples:code-completion [2018/06/18 00:47] (current) – [Usage of CompletionSet and CompletionItem] admin
@@ 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 90: / Line 90: @@
 CompletionItem("Item3")
 ]);
 // or
 var completion_set2 = CompletionSet(["Item1", "Item2", "Item3"]);
 </code>
 <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>
 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.
 <code javascript>
 var item5 = CompletionItem("Item5");
+// custom insetion pattern, with code template syntax.
+// %CurrentWord% - inserted text
 item5.Pattern = "%CurrentWord%(%|%)";
+// custom description tooltip, shown when user scrolls over items and stops on one of them
 item5.onDescription = function () { return this.Text + "() ..."; };
+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>