There are any lib can I use with codemirror for autocomplete?

Question

I am using codemirror editor ... I want to feature like styling the item inside the list which appare when I do autocomplete ... so there are any lib or plugin I can use with codemirror provide to me more features than codemirror. .. Note : I want to use it with codemirror not rather than codemirror. ... thanks in advance

Answer 1

I succeeded. In show-hint.css I added some CSS:

.table.CodeMirror-hint {
  font-weight: bold;
  color: black;
}

.column.CodeMirror-hint {
  font-weight: bold;
  color: black;
}

.keyword.CodeMirror-hint {
  font-weight: bold;
  color: #BF00FF;
}

.builtin.CodeMirror-hint {
  font-weight: bold;
  color: #2E64FE;
}

In my main webpage I dynamically add all tables/columns as objects to hintOptions. For each table I do like this:

        var tcobjs = []; //table columns array of object
        for (j=0; j < tablecolumns.length; j++) {
            tcobjs.push({text:tablecolumns[j],className:"column"});
        }
        hintOptions.tables[table]=tcobjs;

I modified addon/hint/sql-hint.js like this:

  var keywords;
  var builtin;

  function getKeywords(editor) {
    var mode = editor.doc.modeOption;
    if (mode === "sql") mode = "text/x-sql";
    var words = {};
    for (var w in CodeMirror.resolveMode(mode).keywords) { words[w] = CodeMirror.resolveMode(mode).keywords[w]; }
    return words;
  }

  function getBuiltin(editor) {
    var mode = editor.doc.modeOption;
    if (mode === "sql") mode = "text/x-sql";
    var words = {};
    for (var w in CodeMirror.resolveMode(mode).builtin) { words[w] = CodeMirror.resolveMode(mode).builtin[w]; }
    return words;
  }

[....]

    keywords = getKeywords(editor);
    builtin = getBuiltin(editor);

[....]

      addMatches(result, search, tables, function(w) {return {text:w,className:"table"};});
      addMatches(result, search, defaultTable, function(w) {return {text:w,className:"table"};});
      if (!disableKeywords)
        addMatches(result, search, keywords, function(w) {return {text:w.toUpperCase(),className:"keyword"};});
      addMatches(result, search, builtin, function(w) {return {text:w.toUpperCase(),className:"builtin"};});