Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Creating a custom component in Blazor Server

$
0
0

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">&times;</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


Viewing all articles
Browse latest Browse all 4839

Trending Articles