Ace: Customizing autocompletion appearance

[ninjatronic]

I'm using the getCompletions method on the mode to offer custom autocomplete suggestions that appear in the dropdown - but I wonder if there is any way to apply custom styling to the suggestions that appear?

[nightwing]

From getCompletions return array of objects like {caption: "...", value: "..", className: "foo" } and add css rules for ".ace_foo" (see https://github.com/ajaxorg/ace/blob/master/lib/ace/autocomplete/popup.js#L189)

[ninjatronic]

Yes, but that is quite a simple solution. What I want to achieve is to use the autocompleter to show multiple lines of documentation inline, perhaps even with a hyperlink to further docs, and to customize the appearance of the entire dialog. I haven't found a way to do it so far though, as everything is limited to the single line display, with the character limit.

[nightwing]

Do you want to show links and documentation for all suggestions at once? That would make the popup really huge. Cloud9 shows documentation for selected suggestion in another popup next to autocompletion one, most other ides do the same. Customizing the appearance of the entire dialog should be easy since all elements have classes and you can write css for them.

[ninjatronic]

I want to show a snippet of documentation with a link to the full doc in a styled autocomplete dropdown. I'm not so concerned about having the javascript keywords in there, this is for users using a custom SDK, so I want to be able to show hints for which methods/properties are available at the cursor. Does that make sense?

You can close this issue if it is not high-priority for you. I have built an external autocompleter implementation in the meanwhile that uses the change event.

Thanks

[nightwing]

Could you show a screenshot of how your external autocompleter implementation looks. i still don't know how you wanted to customize autocompletion appearance.

that uses the change event

I think using change event will be harder than afterExec event ace autocompleter uses, though i might be mistaken.
Alternatively you could replace only popup implementation and keep the rest.

[ninjatronic]

No using the change event was quite simple to implement.

Unfortunately I can't show a screenshot of how the autocompleter looks at the moment, but if you care to leave this issue open I can update it in the future.

[eelilag]

Hi,
Is there a way to adapt the autocompletion popup width to its content ?

[marbemac]

+1 to the question posted by @eelilag. Or even if it doesn't do it automatically, some way to specify the width/height of the autocomplete box, so that users can see more of the method signatures.