I want to create a component that enables users to **autocomplete **from a list of plaintiffs, in addition to allowing them to **create **a new plaintiff if **no results **are found. I know that there are already auto-complete components that already exist in UI libraries but I want to write my own custom component.
@page "/plaintiff-autocomplete"@using System.Collections.Generic<div class="autocomplete"><input type="text" @bind-value="plaintiffInput" @bind-value:event="oninput" placeholder="Type plaintiff name..." /><div class="autocomplete-items"> @if (suggestions.Count > 0) { @foreach (var suggestion in suggestions) {<div @onclick="(() => SelectSuggestion(suggestion))">@suggestion</div> } } else {<div @onclick="ShowModal">No Results</div> }</div></div>@if (showModal){<div class="modal"><div class="modal-content"><span class="close" @onclick="CloseModal">×</span><h2>Add Plaintiff</h2><form @onsubmit="AddPlaintiff"><label for="plaintiffName">Plaintiff Name:</label><input type="text" id="plaintiffName" @bind-value="newPlaintiff" required /><button type="submit">Add</button></form></div></div>}@code { private string plaintiffInput = ""; private List<string> plaintiffs = new List<string> { "John Doe", "Jane Smith", "David Johnson", "Emily Brown" }; private List<string> suggestions = new List<string>(); private bool showModal = false; private string newPlaintiff = ""; private void SelectSuggestion(string suggestion) { plaintiffInput = suggestion; suggestions.Clear(); } private void ShowModal() { showModal = true; } private void CloseModal() { showModal = false; } private void AddPlaintiff() { if (!string.IsNullOrWhiteSpace(newPlaintiff)) { plaintiffs.Add(newPlaintiff); plaintiffInput = newPlaintiff; showModal = false; newPlaintiff = ""; } } private void UpdateSuggestions() { suggestions = plaintiffs.Where(p => p.ToLower().Contains(plaintiffInput.ToLower())).ToList(); }}I tried creating my own component, all the code is in the .razor file. I am not sure exactly why my binds do not work. While i type in things the application doesnt load any of the results up, it just says "no results". I previously had the code where the autocomplete/filtering WAS working but i modified it a bit and then it stopped.
Also, clicking on "no results" doesn't do anything. I thought that i hooked up the functionality correctly but i guess not