Color Code Selection Options

[Wilson]

Hi Alex,
I’m looking for a way to color code the selection options returned by Auto Complete as a visual clue for end user based on a column in the result set. Optimally I would not show the field controlling the color code attribute.

Thanks,
Bob

Attachments:

1. 

   ACColorCode.png
   

[Alexander Bautz]

This is unfortunately not possible at the moment and would require a change of the code to add support for it.

What you can do is to add the column you use to color code in the “optionDetailFields” array, and add code like this to your Custom JS:

setInterval(function(){
	if(jQuery(".spjs_acWrap").html() !== ""){
		jQuery(".spjs_acItem").find("div").each(function(i,elm){
			if(elm.innerText.match("In progress")){
				elm.style.display = "none";
				elm.parentElement.classList.add("highlightAC");
            }
        });
    }
},500);

This code runs on an interval and looks for the text “In progress” in the options, and if it finds it, hides it and applies the class “highlightAC” to the parent element.

Add the class to your Custom CSS like this:

.highlightAC{
    background-color:green;
    color:white;
}

Alexander

[Author]

Posts