Autocomplete don't filter but highlight

[georgeemr]

Hi, I'm using the following autocomplete code, but the select just changes the background color. How I can filter the item like the other examples. I want that the elements that don't match be hidden.

[anranruye]

Thanks for contacting us @georgeemr . Here's an example:

<AutoComplete TOption="string">
    <ChildContent>
        <AutoCompleteSearch Placeholder="input here" @bind-Value="@value" />
    </ChildContent>
    <OverlayTemplate>
        @foreach (var group in optionGroups)
        {
            <AutoCompleteOptGroup>
                <LabelFragment>
                    <span>
                        @group.title<a style="float: right;" href="https://www.google.com/search?q=ng+zorro" target="_blank">More</a>
                    </span>
                </LabelFragment>
                <ChildContent>
                    @foreach (var option in group.children)
                    {
                        if (value is null || option.title.Contains(value))
                        {
                        <AutoCompleteOption Value="@option.title" Label="@option.title">
                            @option.title
                            <span style="position: absolute; color: #999; right: 16px;">@option.count followers</span>
                        </AutoCompleteOption>
                        }
                    }
                </ChildContent>
            </AutoCompleteOptGroup>
        }
    </OverlayTemplate>
</AutoComplete>

@code
{

    private string value;

    CertainCategoryGroup[] optionGroups = new CertainCategoryGroup[] {
    new CertainCategoryGroup() {
        title= "Topic",
        children=new CertainCategoryOption[]{
            new CertainCategoryOption() {
                title= "Ant Design",
                count= 10000
            },
            new CertainCategoryOption()  {
                title= "Ant Design Blazor",
                count= 10600
            }
        },
    },
    new CertainCategoryGroup() {
        title= "Question",
        children= new CertainCategoryOption[]{
            new CertainCategoryOption()   {
                title= "How is Ant Design Blazor",
                count= 60100
            },
            new CertainCategoryOption()     {
                title= "What is Ant Design",
                count= 30010
            }

        },
    },
    new CertainCategoryGroup() {
        title = "Article",
        children =new CertainCategoryOption[]{
            new CertainCategoryOption()   {
                title = "Ant Design is a design language",
                count = 100000
            }
        }
    }
};

    public class CertainCategoryGroup
    {
        public string title { get; set; }

        public CertainCategoryOption[] children { get; set; }

    }

    public class CertainCategoryOption
    {
        public string title { get; set; }
        public int count { get; set; }
    }

}