Fala, galera! Tudo beleza?

Autocomplete é uma funcionalidade muito útil para diversas aplicações. Quando queremos exibir diversas opções para o usuário escolher, em Xamarin.Forms costumamos utilizar o Picker:

Porém, não seria legal se, ao usuário digitar, existisse uma forma de auto-completar o texto?

Para isso existe o controle AutoSuggestBox que, como o nome já diz, exibe sugestões para o campo de entrada (nosso Entry).

Vamos ver como utilizar?

Configurando o controle

Vamos ao Nuget baixar o pacote dotMorten.Xamarin.Forms.AutoSuggestBox e instalar em todos os nossos projetos:

Pronto! Agora só precisamos utilizar.

Utilizando o Plugin

Para utilizarmos com o MVVM, vamos criar essa ViewModel de exemplo, com uma lista simples de string e um método básico de busca:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Threading.Tasks;
using AutoCompleteExemplo.Model;
using Xamarin.Forms;

namespace AutoCompleteExemplo.ViewModel
{
    public class MainViewModel : INotifyPropertyChanged
    {
        #region Property

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (EqualityComparer<T>.Default.Equals(storage, value))
            {
                return false;
            }

            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }

        #endregion

        bool isBusy;

        public bool IsBusy
        {
            get => isBusy;
            set
            {
                if (SetProperty(ref isBusy, value))
                    IsNotBusy = !isBusy;
            }
        }

        bool isNotBusy = true;

        public bool IsNotBusy
        {
            get => isNotBusy;
            set
            {
                if (SetProperty(ref isNotBusy, value))
                    IsBusy = !isNotBusy;
            }
        }


        public List<string> Users { get; }

        private string _pesquisa;
        public string Pesquisa
        {
            get { return _pesquisa; }
            set => SetProperty(ref _pesquisa, value);
        }

        private string _selecionado;
        public string Selecionado
        {
            get { return _selecionado; }
            set => SetProperty(ref _selecionado, value);
        }

        public MainViewModel()
        {
            Users = new List<string>();

            Users.Add("Bertuzzi");
            Users.Add("Bruna");
            Users.Add("Polly");
            Users.Add("Rodolfo");
            Users.Add("Lester");

        }

        public IEnumerable<string> ObterSugestoes(string text)
        {
            return Users.Where(x => x.StartsWith(text, StringComparison.InvariantCultureIgnoreCase));
        }
    }
}

Em seguida, vamos implementar o controle na tela através do namespace: xmlns:controle=”clr-namespace:dotMorten.Xamarin.Forms;assembly=dotMorten.Xamarin.Forms.AutoSuggestBox”:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AutoCompleteExemplo"
             Padding="0,60,0,0"
             xmlns:controle="clr-namespace:dotMorten.Xamarin.Forms;assembly=dotMorten.Xamarin.Forms.AutoSuggestBox"
             x:Class="AutoCompleteExemplo.MainPage">
    <StackLayout Margin="20">
        <!-- Place new controls here -->
        <Label Text="Vamos AutoCompletar"/>
        
       <controle:AutoSuggestBox PlaceholderText="Qual o usuario deve aparecer?"  
                                WidthRequest="200"
                TextChanged="AutoSuggestBox_TextChanged"
                QuerySubmitted="AutoSuggestBox_QuerySubmitted"
                SuggestionChosen="AutoSuggestBox_SuggestionChosen"/>
        
        <Label Text="{Binding Pesquisa}"  />
        <Label Text="{Binding Selecionado}"  />
        
    </StackLayout>
</ContentPage>

Além disso eu implementei dois Labels para mostrar quando é utilizada a sugestão e quando foi você que colocou o valor.

Finalmente os Eventos que vão auxiliar no AutoComplete:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using AutoCompleteExemplo.ViewModel;
using Xamarin.Forms;
using dotMorten.Xamarin.Forms;

namespace AutoCompleteExemplo
{
    public partial class MainPage : ContentPage
    {
        public MainViewModel ViewModel => (MainViewModel)BindingContext;

        public MainPage()
        {
            InitializeComponent();

            this.BindingContext = new MainViewModel();
        }

        //Evento de AutoComplete
        private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs e)
        {
            AutoSuggestBox box = (AutoSuggestBox)sender;

            if (e.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
            {
                if (string.IsNullOrWhiteSpace(box.Text))
                    box.ItemsSource = null;
                else
                {
                    var suggestions = ViewModel.ObterSugestoes(box.Text);
                    box.ItemsSource = suggestions.ToList();
                }
            }
        }

        //Sugestao Selecionada
        private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs e)
        {
           var itemselecionado = e.SelectedItem;
            ViewModel.Selecionado = $"Item Selecionado: {itemselecionado}";
        }

        //Evento para pegar se foi utilizada a opçao do usuario ou do auto complete
        private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs e)
        {
            if (e.ChosenSuggestion == null)
            {
                ViewModel.Pesquisa = $"Pesquisa: {e.QueryText} ";
                ViewModel.Selecionado = "Item Selecionado: Nenhum";
            }
            else
                ViewModel.Pesquisa = $"Sugestao: {e.ChosenSuggestion}";
        }
    }
}

Notem que existem três Eventos:

• Text changed: texto enviado pelo Usuário para filtrarmos as sugestões
• Suggestion chosen: quando o Usuário seleciona uma das sugestões
• Query submitted: quando o Usuário envia a consulta, dá pra saber se foi ele que decidiu o valor, ou se escolheu uma sugestão

Por fim, rodemos:

Vai dizer que não é legal?

Caso queira baixar o código utilizado no exemplo, clique aqui.

Quer ver outros artigos sobre Xamarin? Acesse este link.

Espero ter ajudado. Aquele abraço!