by SamProf
@page "/" @using System.Collections.Generic; @using System.Linq; <h1>Hello, Shared Search!</h1> <span> <SearchableDropdown Data="new List<ISearchableDropdownItem>(DefaultData)" GetDisplayInfo="GetExampleDisplayInfo" OnSearchUpdated="ExampleSearchUpdated" SetItemID="SetExampleID"></SearchableDropdown> </span> <span> <SearchableDropdown Data="new List<ISearchableDropdownItem>(DefaultData)" GetDisplayInfo="GetExampleDisplayInfo" OnSearchUpdated="ExampleSearchUpdated" SetItemID="SetExampleID"></SearchableDropdown> </span> <span> <SearchableDropdown Data="new List<ISearchableDropdownItem>(DefaultData)" GetDisplayInfo="GetExampleDisplayInfo" OnSearchUpdated="ExampleSearchUpdated" SetItemID="SetExampleID"></SearchableDropdown> </span> @code { List<ExampleData> DefaultData = ExampleData.GetDefaultData(); int SelectedID { get; set; } = 0; // This would return the item's DropdownDisplayInfo if it exists // In retrospect, I think I could simplify the SearchableDropdown a bit because of this design // using the Interface string GetExampleDisplayInfo(int id) { if (DefaultData is null || DefaultData.Count() == 0 || id == 0) return String.Empty; return GetDataByID(id).DropdownDisplayInfo; } // This is flawed and will break this after a search // since this is usually info grabbed from a DB // but for this quick and dirty... idc void ExampleSearchUpdated(string searchTerms) { if (!String.IsNullOrEmpty(searchTerms)) { var results = DefaultData.Where(data => data.FirstName.Contains(searchTerms)).ToList(); if (results != null && results.Count > 0) { DefaultData = results; } } } void SetExampleID(int exampleID) { SelectedID = exampleID; } ExampleData GetDataByID(int id) { return DefaultData.Where(data => data.ID == id).FirstOrDefault(); } }
namespace BlazorFiddleProject { using Microsoft.AspNetCore.Components.Builder; using Microsoft.Extensions.DependencyInjection; using System.Collections.Generic; using System.Linq; public class Startup { public void ConfigureServices(IServiceCollection services) { } public void Configure(IComponentsApplicationBuilder app) { app.AddComponent<App>("app"); } } public class ExampleData : ISearchableDropdownItem { public ExampleData(int id, string firstName, string lastName) { ID = id; FirstName = firstName; LastName = lastName; } public string FullName => $"{FirstName} {LastName}"; public int ID { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public static List<ExampleData> GetDefaultData() { return new List<ExampleData>() { new ExampleData(1, "Person", "One"), new ExampleData(2, "Person", "Two"), new ExampleData(3, "Person", "Three"), new ExampleData(4, "Guy", "One"), new ExampleData(5, "Girl", "One") }; } #region " ISearchableDropdownItem Implementation " public int DropdownItemID => ID; public string DropdownDisplayInfo => FullName; #endregion } public interface ISearchableDropdownItem { public int DropdownItemID { get; } public string DropdownDisplayInfo { get; } } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width"> <title>BlazorFiddleProject</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="_content/MatBlazor/dist/matBlazor.js"></script> <style> app { } </style> <script type="text/javascript"> </script> </head> <body> <app>Loading...</app> <script src="_framework/blazor.webassembly.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

Add component

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.