Color Code Selection Options

Forums Autocomplete Color Code Selection Options

This topic contains 1 reply, has 2 voices, and was last updated by  Alexander Bautz 3 weeks ago.

  • Author
    Posts
  • #23947

    Bob Hornak
    Participant

    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:
  • #23961

    Alexander Bautz
    Keymaster

    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

You must be logged in to reply to this topic.