How to filter complete words in suggestion list using SfTextBoxExt control
The complete search words can filter in the suggestion list box by setting SuggestionMode of SfTextBoxExt as Custom. The same has been demonstrated in the following code example:
XAML:
<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Controls.Input"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<syncfusion:SfTextBoxExt AutoCompleteMode="Suggest" AutoCompleteSource="{Binding Stocks}"
VerticalAlignment="Center" HorizontalAlignment="Center" Width="200"
SuggestionMode="Custom" SearchItemPath="Title" x:Name="filter"></syncfusion:SfTextBoxExt>
</Grid>
</Page>
C#:
namespace App3
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
DataContext = new ViewModel();
filter.Filter = CustomFilter;
}
private bool CustomFilter(object search, object item)
{
if ((item as Model).Title.ToLower().StartsWith(search.ToString().ToLower()))
return true;
return false;
}
/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached. The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}
public class Model
{
private string title;
public string Title
{
get { return title; }
set { title = value; }
}
}
public class ViewModel
{
private ObservableCollection<Model> stocks;
public ObservableCollection<Model> Stocks
{
get { return stocks; }
set { stocks = value; }
}
public ViewModel()
{
stocks = new ObservableCollection<Model>();
stocks.Add(new Model() { Title = "F" });
stocks.Add(new Model() { Title = "FB" });
stocks.Add(new Model() { Title = "FCX" });
stocks.Add(new Model() { Title = "FEYE" });
stocks.Add(new Model() { Title = "FIT" });
}
}
}
