How to apply Search in Editable Combobox in WPF using MVVM

Question

I have editable combobox in WPF. which is having list of order number. I need to implement below scenario in my code. The user can fill the starting of order number, and, the system propose the close order number available in the dropdown list.

Can anyone suggest how to do that?

In My Viewmodel i have written:

        public void _fillREOrderNumbers()   
        {
            List<FinishedReprintingOrderNumber> orders = _finishedProductReprintService.GetFinishedProductReprintbyOrder().ToList();
            foreach (var item in orders)
            {
                ReOrders.Add(item);
            }
        }

This is loading the order number in drop down.

View or XAML:

<ComboBox x:Name="cbOFab" HorizontalAlignment="Left" Margin="373,81,0,0" 
 VerticalAlignment="Top" Width="262" IsEditable="True"  
 ItemsSource="{Binding ReOrders, Mode=TwoWay}"  DisplayMemberPath="codOrder" SelectedItem="{Binding 
 ReSelectedOrder}" Background="{DynamicResource dgridRowColor}" />

Till Now, I am able to populate the order number in my combo box but I am not aware how to search inside it.

https://stackoverflow.com/questions/950770/autocomplete-textbox-in-wpf — Incredible, Aug 06 '18 at 10:33
Possible duplicate of [AutoComplete TextBox in WPF](https://stackoverflow.com/questions/950770/autocomplete-textbox-in-wpf) — Anton Gorbunov, Aug 06 '18 at 10:46
kaspar: I want my combobox will display the order number which is entered by user. Not full list which is being selected. — Naman, Aug 06 '18 at 12:18
Also you can do following thing, add keydown event to your combobox that will check what number was pressed and update the selected item, or just update full itemssource in the view-model based on your logic. Please let me know if you know how to do these. — Kaspar, Aug 06 '18 at 12:19
one more thing user, will start typing the order in some textbox? — Kaspar, Aug 06 '18 at 12:25

score 0 · Answer 1 · answered Nov 22 '18 at 14:21

I have implemented filtering of items in ComboBox this way.

Here is XAML:

<ComboBox
MinWidth="200"
ItemsSource="{Binding Path=Shops.View, RelativeSource={RelativeSource TemplatedParent}}" 
DisplayMemberPath="NameExtended"
SelectedItem="{Binding Path=SelectedShop, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
IsTextSearchEnabled="False"
IsEditable="True"
IsDropDownOpen="{Binding Path=ComboOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
StaysOpenOnEdit="True"
Text="{Binding Path=SearchText, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
>
<i:Interaction.Triggers>
    <i:EventTrigger EventName="KeyUp">
        <i:InvokeCommandAction 
            Command="{Binding Path=FilterCommand, RelativeSource={RelativeSource TemplatedParent}}" 
        />
    </i:EventTrigger>
</i:Interaction.Triggers>

You need all lines from IsTextSearchEnabled and below.

When you press any key in combo box, it opens in up and filters items in it, using property SearchText bound to ComboBox.Text.

Here is the view model code:

public string SearchText { get; set; }
private List<Shop> _shops;

protected void FilterShops()
    {
        ComboOpen = true;
        if (!string.IsNullOrEmpty(SearchText))
        {
            Shops.UpdateSource(_shops.Where(s => s.NameExtended.ToLower().Contains(SearchText.ToLower())));
        }
        else
        {
            Shops.UpdateSource(_shops);
        }
        OnPropertyChanged("Shops");
    }

How to apply Search in Editable Combobox in WPF using MVVM

1 Answers1