Blazor Typeahead Control

Overview

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

Installing

The LoreSoft.Blazor.Controls library is available on nuget.org 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

Setup

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

Required

Value - Bind to Value in single selection mode. Mutually exclusive to Values property.

- Bind to in single selection mode. Mutually exclusive to property. Values - Bind to Values in multiple selection mode. Mutually exclusive to Value property.

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

Optional

AllowClear - Allow the selected value to be cleared

- Allow the selected value to be cleared ConvertMethod - The method used to convert search result type to the value type

- 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

- 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

- The initial list of items to show when there isn’t any search text MinimumLength - Minimum number of characters before starting a search

- Minimum number of characters before starting a search Placeholder - The placeholder text to show when nothing is selected

Templates

ResultTemplate - User defined template for displaying a result in the results list

- User defined template for displaying a result in the results list SelectedTemplate - User defined template for displaying the selected item(s)

- User defined template for displaying the selected item(s) NoRecordsTemplate - Template for when no items are found

- Template for when no items are found FooterTemplate - Template displayed at the end of the results list

- 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" Items= "Data.StateList" @ bind-Value= "@SelectedState" Placeholder= "State" > <SelectedTemplate Context= "state" > @state.Name </SelectedTemplate> <ResultTemplate Context= "state" > @state.Name </ResultTemplate> </Typeahead>

@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 ())) . ToList (); 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" Items= "Data.PersonList" @ bind-Values= "@SelectedPeople" Placeholder= "Owners" > <SelectedTemplate Context= "person" > @person.FullName </SelectedTemplate> <ResultTemplate Context= "person" > @person.FullName </ResultTemplate> </Typeahead>

@code { public IList < Person > SelectedPeople ; public Task < IEnumerable < Person >> SearchPeople ( string searchText ) { var result = Data . PersonList . Where ( x => x . FullName . ToLower (). Contains ( searchText . ToLower ())) . ToList (); return Task . FromResult < IEnumerable < Person >>( result ); } }

GitHub Repository Search

Use Octokit to search for a GitHub repository.

<Typeahead SearchMethod= "@SearchGithub" @ bind-Value= "@SelectedRepository" Placeholder= "Repository" MinimumLength= "3" > <SelectedTemplate Context= "repo" > @repo.FullName </SelectedTemplate> <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> </div> </div> </div> </ResultTemplate> </Typeahead>