Is there an equivalent of html datalist in Xamarin.Forms, mechanism that would allow to select predefined values but also a free-text entry?

Question

We are building a Xamarin forms app.

One of the fields is supposed to be a select where you can pick one of the predefined values or enter a free text value like into the text field.

in HTML one would solve it by using <datalist>

    <input list="browsers" name="browser" id="browser">
    
    <datalist id="browsers">
      <option value="Edge">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>

Is there an equivalent of HTML datalist control in Xamarin.Forms, that would allow selection of values and also a free-text entry?

If there isn't one, how is this sort of functionality (selection of values and also a free-text) achieved in iOS and Android? as it does feel like a quite common scenario.

Answer 1

Answer

I recommend using the Syncfusion.Xamarin.SfAutoComplete NuGet Package.

Note: Syncfusion can be used for Free via its Community License.

I've put together a sample app demonstrating how to use Syncfusion.Xamarin.SfAutoComplete: https://github.com/brminnick/AutoCompleteSample

Walkthrough

To view the completed code from this walkthrough, visit https://github.com/brminnick/AutoCompleteSample

1. Install Syncfusion.Xamarin.SfAutoComplete NuGet Package

1. In Visual Studio, add the Syncfusion.Xamarin.SfAutoComplete NuGet Package to your iOS project, Android project and .NET Standard Project (if applicable).

2. Initialize Syncfusion.Xamarin.SfAutoComplete on iOS

1. In the iOS Project, open AppDelegate.cs
2. In the AppDelegate.cs file, in AppDelegate.FinishedLaunching method, add new Syncfusion.SfAutoComplete.XForms.iOS.SfAutoCompleteRenderer();, like so:

[Register(nameof(AppDelegate))]
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
    public override bool FinishedLaunching(UIApplication app, NSDictionary options)
    {
        new Syncfusion.SfAutoComplete.XForms.iOS.SfAutoCompleteRenderer();

        global::Xamarin.Forms.Forms.Init();
        LoadApplication(new App());

        return base.FinishedLaunching(app, options);
    }
}

3. Use Syncfusion.Xamarin.SfAutoComplete in Xamarin.Forms

Here is an example of a Xamarin.Forms app using Syncfusion.Xamarin.SfAutoComplete:

using System.Collections.Generic;
using Syncfusion.SfAutoComplete.XForms;
using Xamarin.Forms;

namespace AutoCompleteSample
{
    public class App : Application
    {
        public App() => MainPage = new AutoCompletePage();
    }

    class AutoCompletePage : ContentPage
    {
        public AutoCompletePage()
        {
            Content = new SfAutoComplete
            {
                HeightRequest = 40,
                AutoCompleteSource = new List<string>
                {
                    "Edge",
                    "Firefox",
                    "Chrome",
                    "Opera",
                    "Safari",
                }
            };
        }
    }
}

Demo

This GIF was generated using this completed sample app: https://github.com/brminnick/AutoCompleteSample