We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Is it possible to customize cells of a multicolumn autocomplete?

Thread ID:





128053 Dec 28,2016 09:08 PM UTC Jan 2,2017 03:59 PM UTC JavaScript 1
Tags: ejAutoCompleteTextBox
Thomas French
Asked On December 28, 2016 09:08 PM UTC

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 [Syncfusion]
Replied On January 2, 2017 03:59 PM UTC

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); } 
                      for(var i=0;i<selectedEmployees.length;i++) 
                                background-color:cyan !important; 
                                color: red; 
        font-family: fantasy; 
For your convenience, we have provided a simple sample and the sample is available in: 
we would be happy to assist you for further queries, 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon