Updated the readme file

Author: Choza-rajan

README.md

@@ -1,2 +1,79 @@
 # How-to-add-Header-and-Footer-support-in-DOTNET-MAUI-Autocomplete
-This repository contains a sample demonstrating of Header and Footer support in .NET MAUI Autocomplete.
+This repository contains a sample demonstrating Header and Footer support in .NET MAUI Autocomplete. We can achieve it by following the steps below,
+
+**Step 1:** Initialize the Autocomplete control in the XAML page with all required assemblies.
+
+**XAML:**
+```
+<editors:SfAutocomplete x:Name="autocomplete"/>
+```
+**Step 2:** Create the Model class with the properties that need to be assigned.
+
+**C#:**
+**Model**
+```
+public class SocialMedia
+{
+    public string Name { get; set; }
+    public int ID { get; set; }
+}
+```
+**Step 3:** Create the ViewModel class and then populate social media data in the SocialMediaViewModel
+
+**C#**
+**ViewModel**
+```
+public class SocialMediaViewModel
+{
+    public ObservableCollection<SocialMedia> SocialMedias { get; set; }
+    public SocialMediaViewModel()
+    {
+        this.SocialMedias = new ObservableCollection<SocialMedia>();
+        this.SocialMedias.Add(new SocialMedia() { Name = "Facebook", ID = 0 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "Google Plus", ID = 1 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "Instagram", ID = 2 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "LinkedIn", ID = 3 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "Skype", ID = 4 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "Telegram", ID = 5 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "Televzr", ID = 6 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "Tik Tok", ID = 7 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "Tout", ID = 8 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "Tumblr", ID = 9 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "Twitter", ID = 10 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "Vimeo", ID = 11 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "WhatsApp", ID = 12 });
+        this.SocialMedias.Add(new SocialMedia() { Name = "YouTube", ID = 13 });
+    }
+}
+```
+**Step 4:** Initialize the Autocomplete control in the XAML page in which the ViewModel class is set to the BindingContext.
+```
+<editors:SfAutocomplete HeightRequest="40" 
+                         WidthRequest="300"                        
+                         MaxDropDownHeight="200" 
+                         ItemsSource="{Binding SocialMedias}" 
+                         ShowDropdownHeaderView="True" 
+                         DisplayMemberPath="Name"
+                         DropdownHeaderViewHeight="50"
+                         Margin="50">
+            <editors:SfAutocomplete.DropdownHeaderView>
+                <StackLayout BackgroundColor="#f0f0f0" >
+                    <Label  FontSize="20" Text="Header View" TextColor="Red" />
+                </StackLayout>
+            </editors:SfAutocomplete.DropdownHeaderView>
+        </editors:SfAutocomplete>
+
+        <editors:SfAutocomplete HeightRequest="40" 
+                  WidthRequest="300"                
+                  MaxDropDownHeight="200" 
+                  ItemsSource="{Binding SocialMedias}" 
+                  ShowDropdownFooterView="True" 
+                  DisplayMemberPath="Name"
+                  DropdownFooterViewHeight="50">
+            <editors:SfAutocomplete.DropdownFooterView>
+                <StackLayout BackgroundColor="#f0f0f0" >
+                    <Label  FontSize="20" Text="Footer View" TextColor="Red" />
+                </StackLayout>
+            </editors:SfAutocomplete.DropdownFooterView>
+        </editors:SfAutocomplete>
+```