Skip to content
C# CSS HTML PowerShell JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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" />

Then add the JS script at the bottom of the page using the following script tag.

<script src="_content/LoreSoft.Blazor.Controls/BlazorControls.js"></script>

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;
You can’t perform that action at this time.