Skip to content


Repository files navigation


The LoreSoft Blazor Controls project contains a collection of Blazor user controls.


The LoreSoft.Blazor.Controls library is available on via package name LoreSoft.Blazor.Controls.

To install LoreSoft.Blazor.Controls, run the following command in the Package Manager Console

Install-Package LoreSoft.Blazor.Controls


To use, you need to include the following CSS and JS files in your index.html (Blazor WebAssembly) or _Host.cshtml (Blazor Server).

In the head tag add the following CSS.

<link rel="stylesheet" href="_content/LoreSoft.Blazor.Controls/BlazorControls.css" />

Typeahead Features

  • Searching data by supplying a search function
  • Template for search result, selected value, and footer
  • Debounce support for smoother search
  • Character limit before searching
  • Multiselect support
  • Built in form validation support

Typeahead Properties


  • Value - Bind to Value in single selection mode. Mutually exclusive to Values property.
  • Values - Bind to Values in multiple selection mode. Mutually exclusive to Value property.
  • SearchMethod - The method used to return search result


  • AllowClear - Allow the selected value to be cleared
  • ConvertMethod - The method used to convert search result type to the value type
  • Debounce - Time to wait, in milliseconds, after last key press before starting a search
  • Items - The initial list of items to show when there isn't any search text
  • MinimumLength - Minimum number of characters before starting a search
  • Placeholder - The placeholder text to show when nothing is selected


  • ResultTemplate - User defined template for displaying a result in the results list
  • SelectedTemplate - User defined template for displaying the selected item(s)
  • NoRecordsTemplate - Template for when no items are found
  • FooterTemplate - Template displayed at the end of the results list
  • LoadingTemplate - Template displayed while searching

Typeahead Examples

Basic Example

State selection dropdown. Bind to Value property for single selection mode.

<Typeahead SearchMethod="@SearchState"
    <SelectedTemplate Context="state">
    <ResultTemplate Context="state">
@code {
    public StateLocation SelectedState { get; set; }

    public Task<IEnumerable<StateLocation>> SearchState(string searchText)
        var result = Data.StateList
            .Where(x => x.Name.ToLower().Contains(searchText.ToLower()))

        return Task.FromResult<IEnumerable<StateLocation>>(result);

Multiselect Example

When you want to be able to select multiple results. Bind to the Values property. The target property must be type IList<T>.

<Typeahead SearchMethod="@SearchPeople"
    <SelectedTemplate Context="person">
    <ResultTemplate Context="person">
@code {
    public IList<Person> SelectedPeople;

    public Task<IEnumerable<Person>> SearchPeople(string searchText)
        var result = Data.PersonList
            .Where(x => x.FullName.ToLower().Contains(searchText.ToLower()))

        return Task.FromResult<IEnumerable<Person>>(result);

GitHub Repository Search

Use Octokit to search for a GitHub repository.

<Typeahead SearchMethod="@SearchGithub"
    <SelectedTemplate Context="repo">
    <ResultTemplate Context="repo">
        <div class="github-repository clearfix">
            <div class="github-avatar"><img src="@repo.Owner.AvatarUrl"></div>
            <div class="github-meta">
                <div class="github-title">@repo.FullName</div>
                <div class="github-description">@repo.Description</div>
                <div class="github-statistics">
                    <div class="github-forks"><i class="fa fa-flash"></i> @repo.ForksCount Forks</div>
                    <div class="github-stargazers"><i class="fa fa-star"></i> @repo.StargazersCount Stars</div>
                    <div class="github-watchers"><i class="fa fa-eye"></i> @repo.SubscribersCount Watchers</div>
@inject IGitHubClient GitHubClient;

@code {
    public Repository SelectedRepository { get; set; }

    public async Task<IEnumerable<Repository>> SearchGithub(string searchText)
        var request = new SearchRepositoriesRequest(searchText);
        var result = await GitHubClient.Search.SearchRepo(request);

        return result.Items;