I need to load the autocompletesource from the database and want to show a progress icon while i am fetching data from db

[Zeeshan]

Hi,

I need to load the autocompletesource from the database at run time and want to show a progress icon in suggestion box while i am fetching the data from db. Is it possible?

Thanks,

Siraj

[Hemalatha Marikumar]

Hi Zeeshan, 

 

Greetings from Syncfusion. 

 

We have analyzed your query and it is possible to load the indicator (SfBusyIndicator) until fetching the data from SQLite database to AutoComplete’s source with the help of DropDownHeaderView or FooterView as like below code snippet. 

 

XAML: 

<autocomplete:SfAutoComplete x:Name="autoComplete" 

                                     HeightRequest="45" 

                                     DropDownFooterViewHeight="60" 

                                     ValueChanged="AutoComplete_ValueChanged" 

                                     NoResultsFoundText="No Results" 

                                   

                                     DisplayMemberPath="Name"> 

            <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#: 

public partial class MainPage : ContentPage 

    { 

        AutoCompletetViewModel dataBaseViewModel = new AutoCompletetViewModel(); 

        public ObservableCollection<Employee> EmployeeCollection { get; set; } 

        public MainPage() 

        { 

            InitializeComponent(); 

           

            autoComplete.BindingContext = this; 

        } 

  

        private void AutoComplete_ValueChanged(object sender, Syncfusion.SfAutoComplete.XForms.ValueChangedEventArgs e) 

        { 

            

            DataChanged(); 

        } 

  

        private async void DataChanged() 

        { 

            await Task.Delay(4000); 

            busyindicator.IsBusy = false; 

            autoComplete.DropDownFooterViewHeight = 0; 

            if (autoComplete.DataSource == null) 

            { 

                EmployeeCollection = new ObservableCollection<Employee>(); 

                var Emp = dataBaseViewModel.ItemsSource.GetItems<Employee>(); 

                foreach (Employee emp in Emp) 

                { 

                    EmployeeCollection.Add(emp); 

                } 

                autoComplete.DataSource = EmployeeCollection; 

            }         

        } 

  

    } 

  

Please find the prepared sample in below link 

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoCompleteSQLite-1514186581.zip

Please let us know if you have any other queries. 

 

Regards, 

Hemalatha M. 

[Zeeshan]

Thank you for your help. I am going to give it a try

[Hemalatha Marikumar]

Hi Zeeshan, 

 

Thanks for your update. 

 

We will wait until hear from you. 

 

Regards, 

Hemalatha M. 

 

[Zeeshan]

I have another question, how can i get the text entered in the search bar for search? Suppose user trying to search something in autocomplete search, i want the text, user enters to search and not selected item.

[Hemalatha Marikumar]

Hi Zeeshan,

Thanks for your update. 

 

We would like to let you know that the typing text has been notified by using the ValueChanged event and that you can get the Text of SfAutoComplete in order to meet your requirement as per the code snippet below. 

 

XAML: 

<autocomplete:SfAutoComplete x:Name="autoComplete" 

                                     HeightRequest="45" 

                                     DropDownFooterViewHeight="60" 

                                     ValueChanged="AutoComplete_ValueChanged" 

                                     NoResultsFoundText="No Results" 

                                     DisplayMemberPath="Name"/> 

C#: 

  private void AutoComplete_ValueChanged(object sender, Syncfusion.SfAutoComplete.XForms.ValueChangedEventArgs e) 

        { 

            string enteredText = autoComplete.Text; 

            string enteredValue = e.Value; 

  

        } 

Please let us know if you have any other queries. 

 

Regards, 

Hemalatha M. 

[Zeeshan]

Hi,

Thanks for the update. I have used the same code but the text property is always empty. For example, i wrote something in autocomplete and then tried to fetch the text, it is always empty.

 

[Hemalatha Marikumar]

Hi Zeeshan,

We have analyzed your query, and checked Text property of AutoComplete, it returns the entered text. 

  

For example, we  bind the AutoComplete Text property to label Text property, when type the character in autocomplete the text properly appeared in label.

XAML: 

<StackLayout Padding="10">
<Label Text="{Binding Source={x:Reference autoComplete},Path=Text}"/> 

        <autocomplete:SfAutoComplete x:Name="autoComplete" 

                                     HeightRequest="45" 

                                     DropDownFooterViewHeight="60" 

                                     ValueChanged="AutoComplete_ValueChanged" 

                                     NoResultsFoundText="No Results" 

                                   

                                     DisplayMemberPath="Name"/>
</StackLayout> 

  

Output: 

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

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

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

Regards 

Hemalatha M. 

[Zeeshan]

Thank you for the help. I will check it and will update the status

[Hemalatha Marikumar]

Hi Zeeshan, 

 

Thanks for your update. 

 

We will wait until hear from you. 

 

Regards, 

Hemalatha M. 

[brekooname]

Hi Zeeshan, 

 

Thanks for your update. 

 

We will wait until hear from you. 

 

Regards, 

Hemalatha M. 

I want to find the employee name and display the Value  or code in the result

How does that work?

Thank you

[Hemalatha Marikumar]

Hi Zeeshan,

Thanks for your update.

We have analysed your query. You can fulfil this requirement by using ItemTemplate of SfAutoComplete as like below code snippet.

XAML: 

<autocomplete:SfAutoComplete 

                       HeightRequest="45" 

                       DropDownFooterViewHeight="60" 

                       ValueChanged="AutoComplete_ValueChanged" 

                       NoResultsFoundText="No Results" 

                       DisplayMemberPath="Name"> 

            <autocomplete:SfAutoComplete.ItemTemplate> 

                <DataTemplate > 

                    <StackLayout Orientation="Horizontal"> 

                        <Label Text="{Binding Value}"/> 

                        <Label Text="{Binding Code}"/> 

                    </StackLayout> 

                </DataTemplate> 

            </autocomplete:SfAutoComplete.ItemTemplate> 

</autocomplete:SfAutoComplete> 

We have prepared sample based on your requirement please find the sample from below location.

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

Please let us know if you have any other queries. 

 

Regards, 

Hemalatha M. 

[brekooname]

Thank you for the answer

What I mean is that I want the code or value to appear in the result

Thanks for help

[Hemalatha Marikumar]

Hi Brekooname,

Thanks for your update.

Your requirement has been achieved by triggering SfAutoComplete SelectionChanged event and using the AddedItems event argument we can get the model and set the value to label as like below code snippet.

XAML: 

<StackLayout VerticalOptions="Center" Padding="10"> 

        

         

        <Label Text="Entered Text" FontAttributes="Bold"/> 

        

        <StackLayout Orientation="Horizontal"> 

            <Label Text="{Binding Source={x:Reference autoComplete},Path=Text}"/> 

            <Label x:Name="resultLabel"/> 

        </StackLayout> 

  

        <autocomplete:SfAutoComplete x:Name="autoComplete" SelectionChanged="AutoComplete_SelectionChanged" 

                                     HeightRequest="45" 

                                     DropDownFooterViewHeight="60" 

                                     ValueChanged="AutoComplete_ValueChanged" 

                                     NoResultsFoundText="No Results"                                

                                     DisplayMemberPath="Name"> 

… 

        </autocomplete:SfAutoComplete> 

    </StackLayout> 

C#: 

private void AutoComplete_SelectionChanged(object sender, Syncfusion.SfAutoComplete.XForms.SelectionChangedEventArgs e) 

        { 

            resultLabel.Text = (e.AddedItems as Employee).Code; 

        } 

Output:


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/AutoCompleteSQLite1827819875.zip 

 

Regards,
Hemalatha M. 

[Zeeshan]

Thank you. I will check it and will let you know

[brekooname]

It was very helpful

Thank you

[Hemalatha Marikumar]

Hi Brekooname, 

 

Thanks for your update. 

 

We are glad to hear that given solution works. 

 

@Zeeshan – We will wait until hear from you. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Hemalatha M. 

[Safeer Ahmad]

Hi, I'm trying to achieve same functionality in my project to show a progress indicator. But it doesn't work on iOS, could you please check that?
I've download the provided sample, didn't work, upgraded the packages and still not working on iOS.

Also on Android, it opens the dropdown footer view on receiving the search results but I would like to show it on when sending the request to API for searching.

[Ramya Soundar Rajan]

Hi Safeer, 

Greetings from Syncfusion.

We are able to reproduce the reported issue in iOS platform since we could open the suggestion only when the DataSource is set initially. We will take this as an improvement in our SfAutoComplete and it will be available in our Volume 1 SP 1 release which is expected to be released in mid of May, 2020. We appreciate your patience until then. 

 

 You can track the status of this from the below feedback link, 

 

Link: https://www.syncfusion.com/feedback/13626/suggestion-opens-only-when-the-datasource-has-collection 

 

In Android, the data is loaded only after the BusyIndicator is shown in the DropDownFooterView as like below code snippet. We are not aware of your exact requirement could you please provide the detail explanation about your requirement which will be helpful for us to provide the better solution at the earliest. 

 

Screenshot: 

 

 

 

Regards, 

Ramya S 

[Mugundhan Saravanan]

Hi Safeer,

Thanks for your patience.

As we promised, we have included the fix for the reported issue in our Essential Studio 2020 Volume 1 SP release v18.1.0.52 is rolled out and is available for download under the following link.

https://www.syncfusion.com/forums/154238/essential-studio-2020-volume-1-service-pack-release-v18-1-0-52-is-available-for-download  

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,
Mugundhan S.