Auto-complete Box

The auto-complete box presents a text box for user input and a drop-down that contains possible matches from an items source collection, for the text typed in. The drop-down shows when the user starts to type, and the match is updated for each character typed. The user can select from the drop-down.

The way in which the text is matched to possible items in the items source is configurable.

Useful Properties

You will probably use these properties most often:

Property	Description
Items	The list of items to match from.
FilterMode	Option for how the matching is to be done. See table below.
AsyncPopulator	An asynchronous function that can can provide the list of matches for a given (string) criteria. This

These are the options for the filter mode property:

Filter Mode	Description
StartsWith	A culture-sensitive, case-insensitive filter where the returned items start with the specified text.
StartsWithCaseSensitive	A culture-sensitive, case-sensitive filter where the returned items start with the specified text.
StartsWithOrdinal	An ordinal, case-insensitive filter where the returned items start with the specified text.
StartsWithOrdinalCaseSensitive	An ordinal, case-sensitive filter where the returned items start with the specified text.
Contains	A culture-sensitive, case-insensitive filter where the returned items contain the specified text.
ContainsCaseSensitive	A culture-sensitive, case-sensitive filter where the returned items contain the specified text.
ContainsOrdinal	An ordinal, case-insensitive filter where the returned items contain the specified text.
ContainsOrdinalCaseSensitive	An ordinal, case-sensitive filter where the returned items contain the specified text.
Equals	A culture-sensitive, case-insensitive filter where the returned items equal the specified text.
EqualsCaseSensitive	A culture-sensitive, case-sensitive filter where the returned items equal the specified text.
EqualsOrdinal	An ordinal, case-insensitive filter where the returned items equal the specified text.
EqualsOrdinalCaseSensitive	An ordinal, case-sensitive filter where the returned items equal the specified text.

info

In an ordinal string comparison, each character is compared using its simple byte value (independent of language).

Examples

This example has a fixed items source (array) that is set in the C# code-behind.

<StackPanel Margin="20">
  <TextBlock Margin="0 5">Choose an animal:</TextBlock>
  <AutoCompleteBox x:Name="animals" FilterMode="StartsWith" />
</StackPanel>

C#

using Avalonia.Controls;
using System.Linq;

namespace AvaloniaControls.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            animals.Items = new string[] 
                {"cat", "camel", "cow", "chameleon", "mouse", "lion", "zebra" }
            .OrderBy(x=>x);
        }
    }
}

More Information

info

For the complete API documentation about this control, see here.

info

View the source code on GitHub AutoCompleteBox.cs