Solución:
No ha incluido exactamente lo que desea, solo una especie de autocompletar.
Señalaré con viñetas la forma manual de hacerlo en general para una lista de elementos:
- Use un TextBox para permitir que el usuario ingrese texto.
- Utilice una lista para reunir todos sus objetos junto con su propiedad de búsqueda, como el nombre del objeto.
- A medida que el usuario escribe algo en el TextBox, la aplicación debe buscar en la Lista la Cadena ingresada en el TextBox.
- Las sugerencias deben mostrarse, de acuerdo con el valor de String escrito, en un ListView en TextBox.
- El usuario hace clic en el elemento ListView, que es una sugerencia, y luego se autocompleta tomando el nombre del objeto del elemento en el que se hizo clic, al TextBox.
Una forma general de realizar el autocompletado sin el largo procedimiento anterior es usar Android AutoCompleteTextView.
Todavía puede usar la lógica básica para hacerlo en Xamarin Forms.
Busque aquí AutoCompleteTextView para Android. Busque aquí, aquí y aquí para obtener ayuda con Autocompletar en Xamarin Forms.
Tengo un control personalizado de Xamarin.Forms que puede usar y que funciona con iOS, Android y UWP. Utiliza renderizadores personalizados para proporcionar una interfaz de usuario nativa debajo de las cubiertas. Construí esto porque no encontré ningún control que brindara una buena experiencia nativa y no cambiara la altura del control cuando se abre el menú desplegable. Toda la referencia de doc + al paquete NuGet está disponible aquí: https://github.com/dotMorten/XamarinFormsControls/tree/master/AutoSuggestBox
Implementé un AutocompleteView en mi proyecto. Puedes referirlo.
public class AutoCompleteView : ContentView
{
public static readonly BindableProperty SuggestionsProperty = BindableProperty.Create(nameof(Suggestions), typeof(IEnumerable), typeof(AutoCompleteView), null, BindingMode.OneWay, null, OnSuggestionsChanged);
public static readonly BindableProperty SearchTextProperty = BindableProperty.Create(nameof(SearchText), typeof(string), typeof(AutoCompleteView), null, BindingMode.TwoWay, null, OnSearchTextChanged);
public static readonly BindableProperty PlaceholderProperty = BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(AutoCompleteView), null, BindingMode.OneWay, null, OnPlaceholderChanged);
public static readonly BindableProperty MaximumVisibleSuggestionItemsProperty = BindableProperty.Create(nameof(MaximumVisibleSuggestionItems), typeof(int), typeof(AutoCompleteView), 4);
public static readonly BindableProperty SuggestionItemTemplateProperty = BindableProperty.Create(nameof(SuggestionItemTemplate), typeof(DataTemplate), typeof(AutoCompleteView), null, BindingMode.OneWay, null, OnSuggestionItemTemplateChanged);
public static readonly BindableProperty DisplayPropertyNameProperty = BindableProperty.Create(nameof(DisplayPropertyName), typeof(string), typeof(AutoCompleteView));
public IEnumerable Suggestions
{
get { return (IEnumerable)GetValue(SuggestionsProperty); }
set { SetValue(SuggestionsProperty, value); }
}
public string SearchText
{
get { return (string)GetValue(SearchTextProperty); }
set { SetValue(SearchTextProperty, value); }
}
public string Placeholder
{
get { return (string)GetValue(PlaceholderProperty); }
set { SetValue(PlaceholderProperty, value); }
}
public int MaximumVisibleSuggestionItems
{
get { return (int)GetValue(MaximumVisibleSuggestionItemsProperty); }
set { SetValue(MaximumVisibleSuggestionItemsProperty, value); }
}
public DataTemplate SuggestionItemTemplate
{
get { return (DataTemplate)GetValue(SuggestionItemTemplateProperty); }
set { SetValue(SuggestionItemTemplateProperty, value); }
}
public string DisplayPropertyName
{
get { return (string)GetValue(DisplayPropertyNameProperty); }
set { SetValue(DisplayPropertyNameProperty, value); }
}
public ItemsStack SuggestionsListView { get; private set; }
public Entry SearchEntry { get; private set; }
public IEnumerable OriginSuggestions { get; private set; }
public NestedScrollView SuggestionWrapper { get; private set; }
public Grid Container { get; private set; }
public bool IsSelected { get; private set; }
public int TotalNumberOfTypings { get; private set; }
private static void OnSuggestionsChanged(object bindable, object oldValue, object newValue)
{
var autoCompleteView = bindable as AutoCompleteView;
var suggestions = (IEnumerable)newValue;
autoCompleteView.OriginSuggestions = suggestions;
suggestions = autoCompleteView.FilterSuggestions(suggestions, autoCompleteView.SearchText);
autoCompleteView.SuggestionsListView.ItemsSource = suggestions;
}
private static void OnSearchTextChanged(object bindable, object oldValue, object newValue)
{
var autoCompleteView = bindable as AutoCompleteView;
var suggestions = autoCompleteView.OriginSuggestions;
if (newValue != null)
{
suggestions = autoCompleteView.FilterSuggestions(suggestions, autoCompleteView.SearchText);
// assign when initializing with data
if (autoCompleteView.SearchEntry.Text != autoCompleteView.SearchText)
{
autoCompleteView.SearchEntry.Text = autoCompleteView.SearchText;
}
}
autoCompleteView.SuggestionsListView.ItemsSource = suggestions;
if (Device.OS == TargetPlatform.Android)
{
// update the layout -> only do this when user is typing instead of selection an item from suggestions list
// -> prevent duplicated update layout
if (!autoCompleteView.IsSelected)
{
autoCompleteView.UpdateLayout();
}
else
{
autoCompleteView.IsSelected = false;
}
}
}
private static void OnSuggestionItemTemplateChanged(object bindable, object oldValue, object newValue)
{
var autoCompleteView = bindable as AutoCompleteView;
if (autoCompleteView.SuggestionsListView != null)
{
autoCompleteView.SuggestionsListView.ItemTemplate = autoCompleteView.SuggestionItemTemplate;
}
}
public IEnumerable FilterSuggestions(IEnumerable suggestions, string keyword)
{
if (string.IsNullOrEmpty(keyword) || suggestions == null) return suggestions;
var searchWords = keyword.ConvertToNonMark().ToLower().Split(new string[] { " " }, StringSplitOptions.RemoveEmptyEntries);
var result = suggestions.Cast<object>();
foreach (var item in searchWords)
{
if (!string.IsNullOrEmpty(DisplayPropertyName))
{
result = result.Where(x => x.GetType().GetRuntimeProperty(DisplayPropertyName).GetValue(x).ToString().ConvertToNonMark().ToLower().Contains(item)).ToList();
}
else
{
result = result.Where(x => x.ToString().ConvertToNonMark().ToLower().Contains(item)).ToList();
}
}
return result;
}
private static void OnPlaceholderChanged(object bindable, object oldValue, object newValue)
{
var autoCompleteView = bindable as AutoCompleteView;
autoCompleteView.SearchEntry.Placeholder = newValue?.ToString();
}
public void UpdateLayout()
{
var expectedHeight = this.getExpectedHeight();
Container.HeightRequest = expectedHeight;
Container.ForceLayout();
}
private void SearchEntry_TextChanged(object sender, TextChangedEventArgs e)
{
TotalNumberOfTypings++;
Device.StartTimer(TimeSpan.FromMilliseconds(1000), () => {
TotalNumberOfTypings--;
if (TotalNumberOfTypings == 0)
{
SearchText = e.NewTextValue;
}
return false;
});
}
private void SearchEntry_Focused(object sender, FocusEventArgs e)
{
UpdateLayout();
IsSelected = false;
}
private void SearchEntry_Unfocused(object sender, FocusEventArgs e)
{
Container.HeightRequest = 50;
Container.ForceLayout();
}
private void SuggestionsListView_ItemSelected(object sender, ItemTappedEventArgs e)
{
IsSelected = true;
SearchEntry.Text = !string.IsNullOrEmpty(DisplayPropertyName) ? e.Item?.GetType()?.GetRuntimeProperty(DisplayPropertyName)?.GetValue(e.Item)?.ToString() : e.Item?.ToString();
Container.HeightRequest = 50;
Container.ForceLayout();
}
private void OverlapContentView_Tapped(object sender, TappedEventArgs e)
{
UpdateLayout();
IsSelected = false;
}
private int getExpectedHeight()
{
var items = SuggestionsListView.ItemsSource as IList;
int wrapperHeightRequest = items != null ?
(items.Count >= MaximumVisibleSuggestionItems ? MaximumVisibleSuggestionItems * 40 : items.Count * 40) : 0;
if (Device.OS == TargetPlatform.Android)
{
return wrapperHeightRequest + 50;
}
return MaximumVisibleSuggestionItems * 40 + 50;
}
public AutoCompleteView()
{
Container = new Grid();
SearchEntry = new Entry();
SuggestionsListView = new ItemsStack();
SuggestionWrapper = new NestedScrollView();
// init Grid Layout
Container.RowSpacing = 0;
Container.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
Container.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
Container.RowDefinitions.Add(new RowDefinition() { Height = 50 });
Container.HeightRequest = 50;
// init Search Entry
SearchEntry.HorizontalOptions = LayoutOptions.Fill;
SearchEntry.VerticalOptions = LayoutOptions.Fill;
SearchEntry.TextChanged += SearchEntry_TextChanged;
SearchEntry.Unfocused += SearchEntry_Unfocused;
SearchEntry.Focused += SearchEntry_Focused;
// init Suggestions ListView
SuggestionsListView.BackgroundColor = Color.White;
SuggestionsListView.ItemTapped += SuggestionsListView_ItemSelected;
SuggestionsListView.VerticalOptions = LayoutOptions.End;
SuggestionsListView.Spacing = 1;
// suggestions Listview's wrapper
SuggestionWrapper.VerticalOptions = LayoutOptions.Fill;
SuggestionWrapper.Orientation = ScrollOrientation.Vertical;
SuggestionWrapper.BackgroundColor = Color.White;
SuggestionWrapper.Content = SuggestionsListView;
Container.Children.Add(SuggestionWrapper);
Container.Children.Add(SearchEntry, 0, 1);
this.Content = Container;
}
}
Ejemplo de uso:
<customControls:AutoCompleteView SearchText="{Binding User.UniversitySchool}" Suggestions="{Binding Schools}" DisplayPropertyName="Name" Placeholder="Please choose your school">
<customControls:AutoCompleteView.SuggestionItemTemplate>
<DataTemplate>
<ContentView Padding="10">
<Label Text="{Binding Name}" HeightRequest="20" LineBreakMode="HeadTruncation" />
</ContentView>
</DataTemplate>
</customControls:AutoCompleteView.SuggestionItemTemplate>
</customControls:AutoCompleteView>
En esta vista, utilicé el control ItemStack. Puede consultar esto: https://gist.github.com/NVentimiglia/2723411428cdbb72fac6
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)