How to Enable Filtering in Editable Mode of WinUI ComboBox?

This article explains how to enable filtering in the editable mode of the WinUI ComboBox control.

To enable filtering, set both the IsFilteringEnabled and IsEditable properties to true. By default, these properties are set to false.

Once enabled, the dropdown will automatically open as you begin typing in the SfComboBox.
Note: Filtering is supported only when the SfComboBox is in editable mode.

C#

//Model.cs
public class CityInfo
{
   public string CityName { get; set; }
   public string CountryName { get; set; }
   public bool IsCapital { get; set; }
}

//ViewModel.cs
public class CityViewModel
{
   public ObservableCollection<CityInfo> Cities { get; set; }
   public CityViewModel()
   {
       this.Cities = new ObservableCollection<CityInfo>();
       this.Cities.Add(new CityInfo() { CityName= "Chicago", CountryName= "USA" });
       this.Cities.Add(new CityInfo() { CityName= "Los Angeles", CountryName= "USA" });          
       this.Cities.Add(new CityInfo() { CityName= "Houston", CountryName= "USA" });
       this.Cities.Add(new CityInfo() { CityName= "New York", CountryName= "USA" });
       this.Cities.Add(new CityInfo() { CityName = "Washington", CountryName = "USA", IsCapital = true });
       this.Cities.Add(new CityInfo() { CityName= "Chennai", CountryName= "India" });
       this.Cities.Add(new CityInfo() { CityName= "Delhi", CountryName= "India", IsCapital = true });
       this.Cities.Add(new CityInfo() { CityName= "Kolkata", CountryName= "India" });
       this.Cities.Add(new CityInfo() { CityName= "Mumbai", CountryName= "India" });
       this.Cities.Add(new CityInfo() { CityName= "Berlin", CountryName= "Germany", IsCapital = true });
       this.Cities.Add(new CityInfo() { CityName= "Cologne", CountryName= "Germany" });
       this.Cities.Add(new CityInfo() { CityName= "Hamburg", CountryName= "Germany" });
       this.Cities.Add(new CityInfo() { CityName= "Munich", CountryName= "Germany" });
       this.Cities.Add(new CityInfo() { CityName= "Quebec City", CountryName= "Canada" });
       this.Cities.Add(new CityInfo() { CityName= "Ottawa", CountryName= "Canada", IsCapital = true });
       this.Cities.Add(new CityInfo() { CityName= "Toronto", CountryName= "Canada" });
       this.Cities.Add(new CityInfo() { CityName= "Vancouver", CountryName= "Canada" });
       this.Cities.Add(new CityInfo() { CityName= "Victoria", CountryName= "Canada" });
       this.Cities.Add(new CityInfo() { CityName= "London", CountryName= "England", IsCapital = true });
       this.Cities.Add(new CityInfo() { CityName= "Bath", CountryName= "England" });
       this.Cities.Add(new CityInfo() { CityName= "Manchester", CountryName= "England" });
       this.Cities.Add(new CityInfo() { CityName= "Oxford", CountryName= "England" });
       this.Cities.Add(new CityInfo() { CityName= "Bandung", CountryName= "Indonesia" });
       this.Cities.Add(new CityInfo() { CityName= "Jakarta", CountryName= "Indonesia", IsCapital = true });
       this.Cities.Add(new CityInfo() { CityName= "Depok", CountryName= "Indonesia" });
       this.Cities.Add(new CityInfo() { CityName= "Makassar", CountryName= "Indonesia" });
       this.Cities.Add(new CityInfo() { CityName= "Surabaya", CountryName= "Indonesia" });
   }
}

XAML:

<editors:SfComboBox x:Name="comboBox"
                   IsEditable="true"
                   IsFilteringEnabled="true"
                   ItemsSource="{Binding Cities}"
                   TextMemberPath="CityName"
                   DisplayMemberPath="CityName">
       <editors:SfComboBox.DataContext>
           <local:CityViewModel/>
       </editors:SfComboBox.DataContext>
</editors:SfComboBox> 

Conclusion

I hope you enjoyed learning how to enable filtering in WinUI ComboBox editable mode.

You can refer to our WinUI ComboBox feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the Licence and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forum, Support portal, or feedback portal. We are always happy to assist you!