How to style dropdown hint items individually?

1

I found the .CodeMirror-hint class inside show-hint.css to style the dropdown items but I want to for example change the color for each item individually. For example SQL function items are red and SQL keyword items are blue.
How do I accomplish this?

update:
I think I need to add a classname to my individual item types. The manual says if the items aren’t simple strings I have to use objects with options like className :slight_smile: Let me try that first.

2

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"};});