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. Image for the cookie policy date

SFAutocomplete example using custom images per result.

Hello,

I am trying to find an example of the sfautocomplete using a custom image per result. I would like to do something like the picture below.

Can anyone point me in the direction of how to create something like the below using custom images for each result in the auto complete?




Thanks!

1 Reply

DR Dhanasekar R Syncfusion Team December 26, 2018 09:17 AM UTC

Hi Keefe, 
  
Greetings from Syncfusion. 
  
Query:” SfAutoComplete example using custom images per result.” 
  
We have validated your query and your requirement can be achieved by using an ImageMemberPath property, you can set the image as a string property and add into a collection. 
 
We have prepared a sample for the same and have a sample from the following link 

Code Snippet
  ObservableCollection<Employee> employeeDetails = new ObservableCollection<Employee>(); 
            employeeDetails.Add(new Employee("Jack""a0.png")); 
            employeeDetails.Add(new Employee("John""a1.png")); 
            employeeDetails.Add(new Employee("James""a2.png")); 
            employeeDetails.Add(new Employee("Jacob""a3.png")); 
            employeeDetails.Add(new Employee("Alice""a4.png")); 
            employeeDetails.Add(new Employee("Arron""a5.png")); 
            employeeDetails.Add(new Employee("Aleena""b0.png")); 
  
            //To display the Name, set the DisplayMemberPath 
            countryAutoComplete.DisplayMemberPath = "Name"; 
  
            //To display the Image, set the ImageMemberPath 
            countryAutoComplete.ImageMemberPath = "Image"; 
  
            //Add the data source 
            countryAutoComplete.DataSource = employeeDetails; 
  
Please check our UG documentation link for more information about our SfAutoComplete control 
  
Please let us know if you have any further clarifications on this. 
  
Regards, 
Dhanasekar 


Loader.
Live Chat Icon For mobile
Up arrow icon