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

Binding Data Source for AutoComplete

Hi, Would like to check if it is possible to bind the autocomplete source on the fly, meaning to say when the page first load, autocomplete does not have any items, maybe after user enter 1 character the list will start to bind

9 Replies

HM Hemalatha Marikumar Syncfusion Team January 22, 2020 09:46 AM UTC

Hi Benjamin,

Greetings from Syncfusion. 
 
We would like to let you know that your requirement ' Start to bind the AutoComplete collection only when entering 1 character ' has been achieved by binding AutoComplete’s DataSource in TextChanged event as per the code snippet below.

 
Code Snippet [XAML] 
    <ContentPage.BindingContext> 
        <local:EmployeeViewModel/> 
    </ContentPage.BindingContext> 
  
    <StackLayout VerticalOptions="Center"> 
        <local:CustomAutoComplete x:Name="autoComplete" VerticalOptions="Center" Watermark="Start typing" 
                                     HeightRequest="40"  SuggestionBoxPlacement="Top" 
                                     DisplayMemberPath="Name" MaximumDropDownHeight="300"/> 
  
    </StackLayout> 
 
  
Code Snippet [C#]: 
public class CustomAutoComplete : SfAutoComplete 
{ 
  
} 
 

Code Snippet [C#] Custom Renderer in Android 
[assembly: ExportRenderer(typeof(CustomAutoComplete), typeof(AutoCompleteRenderer))] 
namespace AutoCompleteSample.Droid 
{ 
  
    public class AutoCompleteRenderer : SfAutoCompleteRenderer 
    { 
  
        SfAutoComplete FormsComboBox; 
  
        public AutoCompleteRenderer(Context context) : base(context) 
        { 
        } 
  
        protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.SfAutoComplete.XForms.SfAutoComplete> e) 
        { 
            base.OnElementChanged(e); 
            if (Control != null) 
            { 
                FormsComboBox = e.NewElement; 
                Control.TextChanged += Control_TextChanged; 
  
            } 
        } 
  
        private void Control_TextChanged(object sender, Com.Syncfusion.Autocomplete.TextChangedEventArgs e) 
        { 
            if (FormsComboBox.DataSource == null) 
                FormsComboBox.DataSource = (FormsComboBox.BindingContext as EmployeeViewModel).EmployeeCollection; 
        } 
  
    } 
} 
 

We have created sample based on your requirement, please find the sample from below.

Sample :
https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoCompleteSample1981988270.zip

Please let us know if you have any other queries. 
 
Regards, 
Hemalatha M. 



BE Benjamin January 22, 2020 10:12 AM UTC

Hi,

Thanks for your reply. would like to check as my project is Xamarin.Forms. it contains iOS project and Android project, thus I would need to add the code for both projects?

Is there other way to do it other than adding the code at the iOS and Android projects?


HM Hemalatha Marikumar Syncfusion Team January 23, 2020 07:31 AM UTC

Hi Benjamin,

Thanks for your update. 
 
We have achieved your requirement in sample level instead of not having a custom renderer as per your request. We have done this with the help of ValueChanged event as below the code snippet. 

XAML: 
<autocomplete:SfAutoComplete x:Name="autoComplete" VerticalOptions="Center" Watermark="Start typing" ValueChanged="AutoComplete_ValueChanged" 
                                     HeightRequest="40"  SuggestionBoxPlacement="Top" 
                                     DisplayMemberPath="Name" MaximumDropDownHeight="300"/> 

C#: 
private void AutoComplete_ValueChanged(object sender, Syncfusion.SfAutoComplete.XForms.ValueChangedEventArgs e) 
        { 
            if (autoComplete.DataSource == null) 
                autoComplete.DataSource = (autoComplete.BindingContext as EmployeeViewModel).EmployeeCollection; 
        } 
 
Please find the modified sample in below 
Hemalatha M. 



BE Benjamin January 23, 2020 08:13 AM UTC

Hi,

thanks for the reply

it might be because I am getting the data from a web service. I am getting the following error following the guide
**UIKit.UIKitThreadAccessException:** 'UIKit Consistency error: you are calling a UIKit method that can only be invoked from the UI thread.'

the data source from the autocomplete is retrieved from a web server.  is there any way to fix this?


HM Hemalatha Marikumar Syncfusion Team January 24, 2020 01:25 PM UTC

Hi Benjamin,

Thanks for your update. 
 
We have analyzed the reported exception it seems as below mentioned forum discussion that exception it occurs some cases while using async method to get data from database. We would like to let you know that is not related with our control.  To resolve this, please use the as below code snippet 
 
Device.BeginInvokeOnMainThread(async () =>
{
       //Do your action 
 
}); 
 
Since we do not know the exact scenario of your case, can you update complete code snippet or modified sample with the reported issue which will be helpful for us to investigate more about and provide better solution at the earliest. 
 
Regards, 
Hemalatha M. 
 
 



BE Benjamin January 28, 2020 07:31 AM UTC

Hi, Tried the suggested method, but it seems that the autocomplete is not getting bind.


HM Hemalatha Marikumar Syncfusion Team January 29, 2020 01:15 PM UTC

Hi Benjamin,

Thanks for your update.

We have created sample with web service data and checked the reported issue of “AutoComplete is not getting bind”, but we are unable to reproduce the issue. Sample we tried with getting data from web can be download from below.

Sample ink: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoCompleteSample-404414312.zip

Can you please provide complete code snippet or modified the sample with reported issue. It will help us to provide better solution at the earliest. 
 
Regards, 
Hemalatha M. 



HM Hemalatha Marikumar Syncfusion Team February 7, 2020 06:23 AM UTC

Hi Benjamin,

Thanks for your update.

We have analyzed your query and it is possible to load indicator (SfBusyIndicator ) until fetching the data from web service with the help of DropDownHeaderView or DropDownFooteView as like below code snippet.

XAML: 
<autocomplete:SfAutoComplete HeightRequest="40" DropDownFooterViewHeight="60"  ShowDropDownFooterView="True" Watermark="Enter title" NoResultsFoundText="No Results"   x:Name="autoComplete" DisplayMemberPath="title"  ValueChanged="AutoComplete_ValueChanged"> 
            <autocomplete:SfAutoComplete.DropDownFooterView> 
                <Grid VerticalOptions="StartAndExpand" HeightRequest="60"  BackgroundColor="#f0f0f0" > 
                    <busyIndicator:SfBusyIndicator VerticalOptions="Start" x:Name="busyindicator" 
                                       AnimationType="SlicedCircle" 
                                       ViewBoxWidth = "40" 
                                       ViewBoxHeight="40" 
                                       TextColor="Maroon" 
                                       IsBusy="True"/> 
                </Grid> 
            </autocomplete:SfAutoComplete.DropDownFooterView> 
  
        </autocomplete:SfAutoComplete> 

C#:
 
private void AutoComplete_ValueChanged(object sender, Syncfusion.SfAutoComplete.XForms.ValueChangedEventArgs e) 
        {          
            if (autoComplete.DataSource == null) 
            {              
                DataChanged(); 
            } 
  
        } 
public async void DataChanged() 
        { 
 
            if (autoComplete.DataSource == null) 
            { 
                await Task.Delay(4000); 
                busyindicator.IsBusy = false; 
                autoComplete.DropDownFooterViewHeight = 0; 
                autoComplete.DataSource = Items; 
            } 
        } 
  

We have modified the sample based on your requirement, please find the sample from below.


Sample link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoCompleteSample-65678018.zip

Regards, 
Hemalatha M. 



BE Benjamin replied to Hemalatha Marikumar February 7, 2020 06:29 AM UTC

Hi Benjamin,

Thanks for your update. 
 
We have analyzed the reported exception it seems as below mentioned forum discussion that exception it occurs some cases while using async method to get data from database. We would like to let you know that is not related with our control.  To resolve this, please use the as below code snippet 
 
Device.BeginInvokeOnMainThread(async () =>
{
       //Do your action 
 
}); 
 
Since we do not know the exact scenario of your case, can you update complete code snippet or modified sample with the reported issue which will be helpful for us to investigate more about and provide better solution at the earliest. 
 
Regards, 
Hemalatha M. 
 
 


Hi. I am able to bind my autocomplete field using Device.BeginInvokeOnMainThread

Just wondering while HTTPClient is trying to get the data, are we able to show a busy icon in the autocomplete field?

And also I realized that the suggestion box does not show under the following steps

  1. on load, I type 3 character in the field
  2. code start to search for the list with HTTP client
  3. list bind to autocomplete
  4. suggestion box is shown
  5. after making a selection, I search another item, this item is another new list
  6. the code will manage the list from 2 with the list from 5 using list1.Union(list2).ToList();
  7. after binding the suggestion is not open
  8. make a change to the field, example remove 1 character or add 1 character before the box is shown
would like to know is there any way to make the suggestion box be shown in steps 7 instead of 8?


Loader.
Live Chat Icon For mobile
Up arrow icon