Customizing autocompletion hint items by adding image before it

1

Is there a way to add a small image/icon before each item in my autocompletion dropdown list? Just like SQL Management Studio has:

select.png864×353 51.9 KB

2

Yes, see for example the Tern demo. You can add a className property to a completion to give it a CSS class, or replace it entirely with your own DOM representation by putting in a render property.

3

Thanks works now.
It now looks like this:

I have done the following:
In show-hint.css I added:

.CodeMirror-hint {
  margin: 0;
  padding: 0 4px;
  border-radius: 2px;
  white-space: pre;
  color: black;
  cursor: pointer;
  padding-left: 22px;
  position: relative;
  line-height: 1.5;  
}

.CodeMirror-hint:before {
  position: absolute;
  left: 2px;
  bottom: 2px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  height: 15px;
  width: 15px;
  line-height: 16px;
  text-align: center;
  color: white;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

.table.CodeMirror-hint:before {
  content: "T";
  background: black;
}

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

.column.CodeMirror-hint:before {
  content: "C";
  background: black;
}

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

.keyword.CodeMirror-hint:before {
  content: "F";
  background: #FF21FF;
}

.builtin.CodeMirror-hint {  
  font-weight: bold;
  color: #0000FF;
}

.builtin.CodeMirror-hint:before {
  content: "K";
  background: #0000FF;
}
1 Like