Autocomplete search results list should display in different colors based on a property value on that result page.

[BHASKAR5 (BHASKARA RAO GORAKALA)]

Lets say we have an autocomplete to select the active and non-active customers list. When autocomplete search shows the results then active customer records should display in green color background and non active customer records should display in red color.

[Deivit (deivit mamani)]

@BHASKAR5 Maybe this is not the best solution but I think this achieves your requirement

1. First, map the Active/NotActive values to another distinct values, like “AAA”/“NNN”. AAA is for active, NNN is for non active. This is to not overlap the values.

2. Add another row to the search results to your autocomplete. Add the “AAA”/“NNN” property, check the “Set value” and set to any property, it doesn’t matter (I think)
   

   

3. Add the following CSS (this will apply the style to the AAA/NNN rows):

   tr[data-gargs*="AAA"] {
       background-color: green !important;
   } 
   tr[data-gargs*="NNN"] {
     background-color: red !important;
   }
   

The trick was the “Set value” which adds a data-gargs attribute to the row in the HTML.

[JoeH9464 (Joe Houghton)]

@BHASKAR5

I recommend that you always show the active/inactive status as text and not solely as colour coding to make your application more accessible and understandable.

Another option for your requirement, if you don’t want to write custom CSS is to use results categorisation on the autocomplete control which will achieve a similar thing by grouping the results by status.