How to format word insid list which show when I do autocomplete ?

[randomnum]

Hello , I define my own languge .... in my languge functions and I want to do autocomplete with my function .... I want to do 2 things ... the first thing is : for example : if I have class called className contain fun1 and func2 I want when I Type className and press "." (className.) to show me list contain : int fun1 double fun2

and when I select int fun1 only fun1 is selected (something like label and value ... the label here is :int fun1 and the value is : fun1 ...when I selected the label I want to value is type on codemirror ) How I can do it ?

the second thing is : How I can color the words in label in different color for example : in label (int fun1) I want do color the word int by red color and fun1 by blue color insid the label ... How I can do it ? if I can't do it with codemirror there are any plugin to do it with codemirror ?? Thanks in advance

[randomnum]

EDIT: Hi I find this plugin here ... But I did not knew How I can change displayText and text for my own language I used this code for autocomplete my language :

var orig = CodeMirror.hint.anyword;
var inner;
CodeMirror.hint.anyword = function(cm) {
    inner = orig(cm) || { from: cm.getCursor(), to: cm.getCursor()};
inner.list.length = 0; 
inner.list.push("fun1");
inner.list.push("fun2");
  return inner;
}

   extraKeys: {
        "Ctrl-Space": "autocomplete",
        "Ctrl-Space":function(cm){  CodeMirror.showHint(cm, CodeMirror.hint.anyword); },
        "'.'": "autocomplete",
        "'.'" : function(cm) { 
            setTimeout(function(){cm.execCommand("autocomplete");}, 10);
            CodeMirror.showHint(cm, CodeMirror.hint.anyword);
         },

can any body help me How to change displayText and text for my CodeMirror.showHint .... plz help

[tlw-ray]

https://codemirror.net/doc/manual.html#addons in show-hint chapter:

---

hint/show-hint.js Provides a framework for showing autocompletion hints. Defines editor.showHint, which takes an optional options object, and pops up a widget that allows the user to select a completion. Finding hints is done with a hinting function (the hint option). This function takes an editor instance and an options object, and returns a {list, from, to} object, where list is an array of strings or objects (the completions), and from and to give the start and end of the token that is being completed as {line, ch} objects. An optional selectedHint property (an integer) can be added to the completion object to control the initially selected hint. If no hinting function is given, the addon will use CodeMirror.hint.auto, which calls getHelpers with the "hint" type to find applicable hinting functions, and tries them one by one. If that fails, it looks for a "hintWords" helper to fetch a list of completeable words for the mode, and uses CodeMirror.hint.fromList to complete from those. When completions aren't simple strings, they should be objects with the following properties:

text: string The completion text. This is the only required property.

displayText: string The text that should be displayed in the menu.

className: string A CSS class name to apply to the completion's line in the menu.

render: fn(Element, self, data) A method used to create the DOM structure for showing the completion by appending it to its first argument.

hint: fn(CodeMirror, self, data) A method used to actually apply the completion, instead of the default behavior.

from: {line, ch} Optional from position that will be used by pick() instead of the global one passed with the full list of completions.

to: {line, ch} Optional to position that will be used by pick() instead of the global one passed with the full list of completions.