The Blazor Autocomplete control’s five standout features

Five standout features of Blazor AutoComplete

[{"selector":"#anim-c233fa10-f711-4487-9ee5-996a2127ae81","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-189213b8-ce85-476c-949a-a08ce8a96ef0","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-93e7b6ef-bfbf-4abc-b6e4-2fd5dff00794","keyframes":{"transform":["translate3d(-128.26856%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c203e741-5808-4f77-a8e0-c49e40a116b7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9307b100-94f5-432e-9af0-7af62d2f4f7a","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-b3305dc1-a8bb-4592-8e38-383fe7fd81c3","keyframes":{"transform":["translate3d(-127.9152%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-23060e18-1b16-446c-abb2-daed2f52c8ab","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7ad422cf-bfeb-427b-9dbe-be4cf5d3d498","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-8e6f7206-5289-45ba-837d-d56db392c998","keyframes":{"transform":["translate3d(-128.6219%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e0eead28-e07d-4a47-961b-72d23e0d64c0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-551f7e89-f118-4bd2-b936-89ef56942ff4","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-51bf0e79-1967-4b65-aad8-f63f0215b3a1","keyframes":{"transform":["translate3d(-128.6219%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a02ab113-9b5c-4c80-8ee4-4bc067c7f59c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-10a309bc-4615-474c-8d04-4b600e4295a2","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-ab51e0db-37ba-4811-b295-e191ce9a4966","keyframes":{"transform":["translate3d(-128.6219%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-763a3596-f24a-4d97-9334-22517cf6d93f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a8e39310-5bee-4a84-ad9a-a3f159e7ada9","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Filtering Highlight matched text Autofit search Grouping Suggestion list

Filtering

[{"selector":"#anim-589f1611-5458-4ae0-ae32-4bb726d7ce51","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4a230df5-1ee5-45f0-b81e-9b08d0ff015a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9b46d6ae-7d0a-4b37-bd9e-54e942319b9f","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-b1839153-0a81-42bc-bc60-39ae3b7ec678","keyframes":{"transform":["translate3d(-116.83501%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-37b211eb-6882-4939-94f4-edb486feb579","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9bf77506-cc04-4ae0-b590-19ab61efa3f5","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Blazor AutoComplete’s dropdown comes with a wide range of built-in filtering options.

Highlight matched text

[{"selector":"#anim-ad85e8f7-12c0-4280-8122-dc8928e8b5e6","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7f60c7c2-6c12-409d-988e-99beadabd144","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2a9bbf81-f4dc-49b5-ba83-7d65428c8739","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-1e5b4526-fac4-4c64-ad9a-05a83562101d","keyframes":{"transform":["translate3d(-116.83501%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-770bf1fc-49c3-446d-abbd-97bc671d155b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9404164e-a7e0-416f-a1ea-634b2d76dd07","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The Blazor AutoComplete control allows you to customize the visual appearance of matching text for each suggestion.

Autofill search

[{"selector":"#anim-e78a37e7-14bf-4728-ae09-5e74a0708c0a","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-48cc8bba-b00f-4a26-91c5-6c8d41a7e264","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-774f4214-40f7-4e7b-a0e1-cc75f23143b0","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-35e5977d-6523-4e64-b505-88ec52c9d044","keyframes":{"transform":["translate3d(-116.83501%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-903d72c4-ae57-4555-bcfc-eb564fd8d1ce","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d372e542-45c7-4ebe-a38b-0262f84b7f50","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The Blazor AutoComplete component features an autofill search option that automatically completes text as the user types it based on suggestion text, allowing the end user to search for items easily.

Grouping

[{"selector":"#anim-123efac6-4811-4ae7-a54e-9d30709bf2b0","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b42dd5f0-5c60-4d82-a62b-365679e17c4a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d56980a7-36a8-4582-ba24-fcce6e33bc33","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-51605f09-de1b-464f-8513-c985b62e4903","keyframes":{"transform":["translate3d(-116.83501%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8fb5ec09-e93c-419a-a13e-a4f4cd1f3c8d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7befefc8-2d50-42d5-9617-73a617c8b54e","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Group the suggestions based on logically organized categories, each with its own header.

Suggestion list

[{"selector":"#anim-10b66cb7-22e0-41ca-a63d-6aa8ce65e6ec","keyframes":{"transform":["translate3d(-115.46053%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6661369b-bb8e-4a0d-b93e-71828b2b1408","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c7207b76-64d0-4e02-aa35-41ebaa55807c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-622f5e51-a1b2-49ee-b72e-d07e1077b54e","keyframes":{"transform":["translate3d(-116.83501%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7f2b8e21-f526-46f2-9817-a7da5d783623","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-84ba473c-d1a2-4c30-aae7-1b18b8a13cac","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The control creates a suggestion list that dynamically updates as users type in the input text box.

Syncfusion Blazor AutoComplete

[{"selector":"#anim-7fc8faf2-678c-4cdc-a9e0-1ef545a75382","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":1,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] The Blazor AutoComplete, also known as a typeahead, is a text box component that offers a list of suggestions for users to choose from as they type. No credit card required.