Is it possible to customize cells of a multicolumn autocomplete?

[Thomas French]

I currently have an Angular1 autoComplete textbox with multi columns. I was wondering if it is possible to color or disable a row, to represent that it has already been selected previously.

For example..

I have a list of "selected" states, that starts with 0 items in it.

I have an autoComplete textbox that is populated with the states["New York" "Florida", "New Mexico"]

If I type into the textbox "New" I should get two results: "New York" and "New Mexico".

Lets say that I select the row "New York". I now place the element "New York" into my list of selected states.

If I reset my textbox back to empty string, and start again, then type in "New" again I should get the same results as before.

However, this time I would like to see the row with "New York" disabled (or colored differently) since it has already been selected and exists in my selected states list.

Is this possible to do?

Thank you

[Rekha J]

Hi Thomas, 

Thanks for contacting Syncfusion support. 

Query: if it is possible to color or disable a row, to represent that it has already been selected previously. 

We have checked the query and we have achieved your requirement by using “select” and “open” events of ejAutocomplete. In select event, we can get the selected row item. In Open event, comparing selected row item with table data and finding the same data in suggestion list. We can add custom class for selected row of the autocomplete to differentiate the row is already selected. 

For your convenience, we have provided the below code snippet: 

 

$scope.select=function (args) { 

      var found = selectedEmployees.some(function (el) { 

                                return el.OrderID === args.item.OrderID; 

       }); 

                 if (!found) { selectedEmployees.push(args.item); } 

    } 

$scope.open=function(args){ 

      if(selectedEmployees.length>0)  

                      for(var i=0;i<selectedEmployees.length;i++) 

                                this.suggestionList.find("tr[id='"+selectedEmployees[i].OrderID+"']").addClass("selected"); 

    } 

 

  <style> 

tr.selected{ 

                                background-color:cyan !important; 

                                color: red; 

        font-family: fantasy; 

                } 

   </style> 

For your convenience, we have provided a simple sample and the sample is available in: 

http://jsplayground.syncfusion.com/sl1zgbaw 

we would be happy to assist you for further queries, 

Regards, 

Rekha.