CODEWITHSUNDEEP
autocompletexamarinxamarin.formsxlabs
osse
osse

Reputation: 1553

Populating suggestion list of xlabs Autocomplete view

I'm having difficulty with populating and showing the suggestions list of XLabs.Forms.Control:AutoCompleteView. I've already binded the observable collection in the ViewModel to the Suggestions property of the autocompleteview xaml.

According to my debug code (i.e. just a loop that writes the contents returned by a query to the debug output), my queries are returning items so i think the problem lies in just showing the said items.

Here's the code for the Xaml and ViewModel (the Store class has a StoreName property/field)

XAML

<ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="SugestionItemTemplate">
                    <ViewCell Height="60">
                            <ViewCell.View>
                                <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                                        <Label Text="{Binding StoreName}" VerticalOptions="Center" HorizontalOptions="Start" />
                                </StackLayout>
                            </ViewCell.View>
                        </ViewCell>
            </DataTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>
  <StackLayout HorizontalOptions="Center" Spacing="10">
    <StackLayout.BindingContext>
      <vm:CreateSaleViewModel />
    </StackLayout.BindingContext>
    <Label Text="Store" />
    <controls:AutoCompleteView Placeholder="Type a store"
                               SuggestionItemDataTemplate="{StaticResource SugestionItemTemplate}"
                               Text="{Binding StoreQuery}"
                               ShowSearchButton="True"
                               SearchBackgroundColor = "White"
                               SearchCommand ="{Binding SearchCmd}" 
                               Suggestions="{Binding StoreSuggestions}" />
  </StackLayout>

ViewModel

 class CreateSaleViewModel
    {
        // Query Variables
        public string StoreQuery { get; set; }

        // Query Suggestions
        public ObservableCollection<Store> StoreSuggestions { get; private set; }

        public ICommand SearchCmd { get; set; }

        public CreateSaleViewModel()
        {
            SearchCmd = new Command(Search);
        }

        private async void Search()
        {
            StoreSuggestions = await App.AzureDataStore.SearchStoresAsync(StoreQuery);
        }
    }

Upvotes: 2

Views: 1733

Answers (1)

Michael Davis
Michael Davis

Reputation: 21

I just ran into this same thing. I solved it by completely ignoring the Search Command, and hooking into the AutoCompleteView TextChanged event in code-behind.

XAML

<controls:AutoCompleteView
        x:Name="MyAutoComplete"
                        SuggestionItemDataTemplate="{StaticResource SuggestionItemTemplate}"
                        Placeholder="Type Product Here"
                        ShowSearchButton="True"
                        SearchBackgroundColor="White"
                        SearchTextColor = "Black"
                        SearchBorderColor = "Yellow"
                        SuggestionBackgroundColor="White"
                        SearchCommand="{Binding SearchCommand}"
                        Suggestions="{Binding Items, Mode=TwoWay}"
                        SelectedItem ="{Binding SelectedItem}"
                        SelectedCommand = "{Binding CellSelectedCommand}"/>

Code Behind

public AddStockItem()
{
    BindingContext = Model;
    InitializeComponent();
    MyAutoComplete.TextChanged += MyAutoComplete_TextChanged;
}
async void MyAutoComplete_TextChanged(object sender, TextChangedEventArgs e)
{
    await Model.LoadProducts(e.NewTextValue);
}

View Model Search ICommand Does nothing at all

public Command<string> SearchCommand
    {
        get
        {
            return _searchCommand ?? (_searchCommand = new Command<string>(
                obj =>{},
                obj => !string.IsNullOrEmpty(obj.ToString())));
        }
    }

ViewModel LoadProducts Updates the ObservableCollection after network call.

public async Task LoadProducts(string term)
    {
        var items = await service.GetProducts(term);
        Items=new ObservableCollection<string>(items);
        OnPropertyChanged("Items");

    }

Upvotes: 1

Related Questions