Overview of the Autocomplete control in Xamarin.Forms

Introduction

Welcome to a quick walk-through of Syncfusion’s autocomplete control for the Xamarin.Forms platform. The autocomplete control provides end users with possible matches as soon as they start typing, and includes key features like different suggestion modes, matching text highlights, multi-selection, diacritic sense, custom search, and much more.

In this blog, we will learn how to build the UI depicted in the following figure.

Xamarin.Forms autocomplete control

Creating a project from a Visual studio template

Refer to this section of the Xamarin Getting Started guide to create a Xamarin.Forms application through Visual Studio.

Adding references from NuGet

Refer to our documentation for the steps for obtaining Essential Studio components in your solution.

Note: Refer to our documentation for the dependency assembly details for adding the autocomplete control to your project. After the assembly reference has been added, an additional step is required for iOS and UWP projects.

Adding control initialization code

For our first example, let’s look at an emailing scenario like the one in the previous image, where the To address bar needs an autocomplete control. In the following steps, the necessary XAML code has been added to initialize the autocomplete control.

Step 1: Include the SfAutoComplete namespace in the respective page.


  

Step 2: Declare SfAutoComplete with the content page by defining the height as 40, since the address bar needs a 40-pixel height.

  
              
  

 

Autocomplete control with 40-pixel height

Binding data

Naturally, the autocomplete control will need to be bound with a data source. For our example, we need to show contact details such as names, IDs, pictures, and their online status. So, we need to create a model and its data as follows.

Creating model

Here we are creating a real-time entity named ContactsInfo with necessary members such as name, ID, online status, and picture.

public class ContactsInfo 
      {
          public string ContactName { get; set;}
          public string ContactID { get; set;}
          public string ContactStatus { get; set;}
          public ImageSource ContactImage { get; set;}
   
      }

View model

Next, we create the ViewModel class to hold the collection of contacts by populating the ContactsInfo for several entities with their values for contact name, ID, online status, and picture.

 
 public class ViewModel
      {
          public
  ObservableCollection<contactsinfo> Contacts = new
  ObservableCollection<contactsinfo>();
          public ViewModel()
          {
              Contacts =
  GetContactDetails();
          }
   
          private Random random = new Random();
   
          public
  ObservableCollection<contactsinfo> GetContactDetails()
          {
             
  ObservableCollection<contactsinfo> customerDetails = new
  ObservableCollection<contactsinfo>();
   
              for (int i = 0; i < CustomerNames.Count(); i++)
              {
                  var details = new ContactsInfo()
                  {
                     
  ContactType = contactType[random.Next(0, 5)],
                      ContactName = CustomerNames[i],
                     
  ContactNumber = CustomerNames[i].Replace(" ", "") + "@outlook.com",
   
                     
  ContactImage = "Image" + (i % 19) + ".png",
                  };
                 
  customerDetails.Add(details);
              }
              return customerDetails;
          }
   
          string[] contactStatus = new string[]
          {
              "Available.png", "Offline.png", "Away.png","Busy.png", "DND.png"
          };
   
          string[] CustomerNames = new string[] 
          {
              "Kyle","Gina","Irene","Katie","Michael",
              "Oscar","Ralph","Torrey","William","Bill",
              "Daniel","Frank","Brenda","Danielle","Fiona",
              "Howard","Jack","Larry","Holly","Jennifer",
              "Liz","Pete","Steve","Vince","Zeke",
              "Aiden","Jackson","Mason","Liam","Jacob",
              "Jayden","Ethan","Noah","Lucas","Logan",
              "Caleb","Caden","Jack","Ryan","Connor",
              "Michael","Elijah","Brayden","Benjamin","Nicholas",
              "Alexander","William","Matthew","James","Landon",
              "Nathan","Dylan","Evan","Luke","Andrew",
              "Gabriel","Gavin","Joshua","Owen","Daniel",
              "Carter","Tyler","Cameron","Christian","Wyatt",
              "Henry","Eli","Joseph","Max","Isaac",
              "Samuel","Anthony","Grayson","Zachary","David",
              "Christopher","John","Isaiah","Levi","Jonathan",
              "Oliver","Chase","Cooper","Tristan","Colton",
              "Austin","Colin","Charlie","Dominic","Parker",
              "Hunter","Thomas", "Alex","Ian","Jordan",
              "Cole","Julian","Aaron","Carson","Miles",
              "Blake","Brody","Adam","Sebastian","Adrian",
              "Nolan","Sean","Riley","Bentley","Xavier",
              "Hayden","Jeremiah","Jason","Jake","Asher",
              "Micah","Jace","Brandon","Josiah","Hudson",
              "Nathaniel","Bryson", "Ryder","Justin","Bryce",
          };
   
      }
     

Now, we can bind the ViewModel’s contacts collection to SfAutoComplete in the XAML page.

 
       
                 
  

After the data source has been applied to the autocomplete control, it will simply read the whole object, so the name you want to search for should be assigned to the DisplayMemberPath of the control.

  
                
                 
  

Note: With the previous code, we have customized the drop-down’s corner, item height, and maximum height. After these customizations the design looks like the following figure:

Autocomplete control with customized appearance

Configuring autocomplete to achieve the desired style by using a template

The autocomplete control allows you to provide templates to the pop-up items. For our requirements, we need to display the contact’s image with an online status notification to the left, and the contact’s name and email ID to the right.

 
    
	
		
                                        
				
                                 
					
                        
                                                         
					
                    
                        
                            
					
                             
				
            
        
       
 

Now, the control appears like so:

Pop-up items with templates applied

Enabling token selection

The autocomplete control supports built-in customizable token styles for the close button. This support is enabled by setting DisplayMode to MultiSelectToken.

 
    
    
        
                                         
				                                 
					
                        
                        
                                                     
					
                                    
                                    
					                             
				
            
        
       
 

Also with the previous code, TokenLayoutMode has been set as VerticalWarp. This TokenLayoutMode helps us place the overflowed token in either a horizonal scroll or vertical wrap.

Autocomplete control with customized token style

Customizing other fields

As stated previously, we are preparing a very simple email composing module with some fields such as To and Subject, a main editor, and buttons like Send and Cancel. The following code will meet our UI requirements.

  
 
  
  
      
          
               
               
               
          
   
          
              
                  
                  
                  
              
   
  
              
   
          
              
                   
                   "/> 
              
              
                   
                   
                   
              
   
              
   
          
              
                   
                   
              
              
              
   
          
      
  
  

Conclusion

The autocomplete control is designed with high customization for every aspect. This control also includes powerful APIs to increase developers’ productivity.

You can download the complete sample from this link.

Share this post:

Leave a comment