Xamarin.forms: [Enhancement] SuggestionView (maybe ComboBox?)

[hartez]

Rationale

Forms currently lacks a control which allows selection of items from a bound, templated list with the option of entering text to filter down that list. (IOW, the equivalent of a classic WPF ComboBox or the UWP AutoSuggestBox.

Implementation

Bindable Properties:

• TitleProperty
• PlaceHolderProperty
• ItemTemplateProperty
• ItemsSourceProperty
• SelectedItemProperty
• NoSuggestionsTemplateProperty
• UpdateItemsCommand
• Text
• TextColor
• PlaceholderColor
• HorizontalTextAlignment
• The IFontElement properties

Events:

• SelectedItemChanged
• TextChanged

The control should normally appear as a text entry field; focusing it should display the templated items for selection in a scrollable view. As text is entered into the field, the TextChanged event will fire; developers can handle this event to apply filtering of the ItemsSource.

Selecting an item should fire SelectedItemChanged, set the SelectedItem property, and hide the templated items. The text displayed in the text entry field when an item is selected will be the string returned by the SelectedItem's ToString() method.

The Title property should function like the title in the Picker control; PlaceHolder should function the same as it does on Entry.

The NoSuggestionsTemplate is displayed if the filtering based on the text entry removes all options. If this property is not set, the control should display the default "no results" UI for the native platform (if one exists). The option display by this template is not selectable.

Clearing the text in the text entry control and unfocusing the control (via Return, Tab, or focusing another control) is equivalent to SelectedItem = null.

This control is not intended to handle very large ItemsSources or support virtualization. Such scenarios should consider using a SearchBar in combination with a ListView.

On UWP, this should be accomplishable using the AutoSuggestBox .

On Android, this will likely be implemented with an AutoCompleteTextView.

On iOS, this will likely be implemented with a UISearchBar and UISearchController.

Difficulty: Moderate to Very

On UWP, this should be a cakewalk; this control already exists. Making this work on Android and iOS will take more work and may require combining multiple native controls.

[rmarinho]

Should we drop #1693 in favor of this one?! i m all for it.Could be a good add to the SearchBar

[rmarinho]

Also see #1669 related with this. We should add a NoResults template? Or user can provide a default item with that?

[hartez]

I think if we decide to approve this proposal, we could drop #1693.

We should add a NoResults template?

Good point. I added NoSuggestionsTemplate.

[andreinitescu]

@hartez I am very confused how you guys mark items as ready for implementation. If this issue has not yet been approved, why is it in "Ready for implementation" queue?

[davidortinau]

I believe this is what we're discussing? https://github.com/XamFormsExtended/Xfx.Controls via @ChaseFlorrel

[ChaseFlorell]

Android has a control baked in that you can use, it's pretty nice (AppCompatAutoCompleteTextView). iOS was a bit of a cluster to build out. I'm still not totally happy with my implementation but at least it works. I do +1 this request though because it's great to have an autocomplete control.

I would suggest this as your starting point

public class ComboBox : Entry {}

[hartez]

@hartez I am very confused how you guys mark items as ready for implementation. If this issue has not yet been approved, why is it in "Ready for implementation" queue?

@andreinitescu TBH, I'm as confused as you are.

[hartez]

I'm liking the name "SuggestionView" less and less; I'm wondering if we shouldn't just call this "ComboBox".

[hartez]

Instead of making developers handle the TextChanged event, does it make sense to add an ICommand UpdateItemsCommand property? If UpdateItemsCommand is set and can be executed, it's executed (with the text entry control's Text value as a parameter) whenever the text changes.

We'd still make TextChanged available, this would just be a more convenient interface which doesn't _require_ dealing with event subscription management.

[ChaseFlorell]

In my implementation, I added a SortinAlgorithm that could be bound from ViewModel. Similar approach as a Command I suppose.

[hartez]

I've added some more properties to the original proposal to make it clear that this will include all the stuff you'd expect from something so similar to an Entry.

@rmarinho Suggested adding DisplayMemberPath; the idea is that in the absence of a DataTemplate, this property specifies the property on the source to display in the options. For UWP, we'd simply pass this through to the AutoSuggestBox control; for iOS/Android, this would be the equivalent of setting a DataTemplate containing a single Label with its Text bound to the DisplayMemberPath. I like the idea (it's convenient for the end user), and I'll add it unless I see any objections.

[ChaseFlorell]

@hartez @rmarinho with a DisplayMemberPath, what happens if someone just wants to send a List of Strings ?

[rmarinho]

it ignores, does a ToString() of the BindingContext, think it should not fail.

[weitzhandler]

I agree this control is very compelling I'd say this is a must.
But I don't like the property selection the OP compiled.

For example:

• I'd bother adding a Command (of the suggested text) that can let the VM know a search has been requested, and a property to be able to set a search delegate manually. This is different than TextChanged, see why:
• Perhaps a DelayInterval or such property to be able to suspend the search until user finishes typing for large collections or other performance-critical scenarios.
• As suggested before, DisplayMemberPath
• Default filtering - should probably a ordinal-case-ignorant StartsWith search.
• A boolean property that will determine if non-existing entries can be selected (only applies for direct values - i.e. strings or if they are bound using a converter that takes gets a string input).

Finally here's an old non-native (hence renders-free) untested AutoCompleteView I've used before, that might give some ideas.

[jgiacomini]

Why the control is not name like UWP / WPF platform ComboBox?

[ChaseFlorell]

@jgiacomini the name hasn't been settled on.

[weitzhandler]

@jgiacomini @ChaseFlorell

A ComboBox is pretty much implemented in XF's Picker.
We're requesting here an editable Entry that displays suggestions.

Although I'd personally prefer AutoCompleteView (inspired by Silverlight's AutoCompleteBox) or AutoSuggestView (UWP), AutoFillView (Android) might also be a candidate, and I don't know what's iOS' naming for that.

Anyway the name is not much of a difference to me, at the end of the day what's important is that they implement this feature!

[ChaseFlorell]

@weitzhandler if you need one asap, I've built one here
https://github.com/XamFormsExtended/Xfx.Controls

[dotMorten]

I made an implementation based on UWP's AutoSuggestBox as I really like this API for dealing with dynamic and non-dynamic lists, telling the difference between selected option and just hitting "enter" on an incomplete option etc. It uses native controls under the covers and works for uwp, Android and iOS.
If that naming and behavior is desirable (not to mention it fragments less away from an existing xaml platform) I'd be happy to refactor it for this repo and submit a PR. Otherwise I'll publish my own package.

[dotMorten]

I don't get the need for NoSuggestionsTemplate.
The normal pattern is to show no drop-down if there aren't any suggestions. Feels like API bloat to me

[dotMorten]

Here's my full implementation of UWP's AutoSuggestBox, working on UWP, Android and iOS:
https://github.com/dotMorten/XamarinFormsControls/tree/master/AutoSuggestBox
And NuGet here: https://www.nuget.org/packages/dotMorten.Xamarin.Forms.AutoSuggestBox

[pictos]

@samhouts is this issue open for community work?

[dotMorten]

Do you want my implementation? If so I'm happy to port it over here. Lots of bugs and scenarios reported and fixes been been so it's pretty stable now. Personally I think the AutoSuggestBox implementation has some flexibility benefits that the other design doesn't have.