LumLev/Blazed.HTMLInputDataList.AutoCompletev0.0.1

Use this blazor HTML component for a list of autocomplete options over an input field. This uses datalist: https://developer.mozilla.org/en-US/docs/web/html/element/datalist

<BlazedAutoComplete AutoCompleteArray="Words" ContainerClass="fullpurp" ButtonSubmitted="SubmittedAuto" StrictSubmit="true" CustomButtonContent="Suubmitter" AutoCompleteButton="BlazedAutoComplete.ButtonType.Submit"></BlazedAutoComplete> @code { public string[] Words = { "Word1", "Word2", "Word3", "Word4", "Word5", "Word6"}; public void SubmittedAuto(string s) { // $"Submitted option: {s}"; Use the {string s} as the submitted word. } }

DataList Source Parameters:

//The array of strings that will render as a HTML datalist. [Parameter] public string[]? AutoCompleteArray { get; set; } //The List of strings that will render as a HTML datalist. [Parameter] public List<string>? AutoCompleteList { get; set; } //The IEnumerable of strings that will render as a HTML datalist. [Parameter] public IEnumerable<string>? AutoCompleteEnumberable { get; set; } //The IQueryable of strings that will render as a HTML datalist. [Parameter] public IQueryable<string>? AutoCompleteIQueryable { get; set; }

Funcitonal Parameters:

// Optional - if true submission of the button only allowed for a string that matches your options [Parameter] public bool StrictSubmit { get; set; } = false; //Optional ==> {BlazedAutoComplete.ButtonType} Enum. You have 3 choices: Search Button, Your own custom named button or None. [Parameter] public ButtonType AutoCompleteButtonType { get; set; }

The 3 Choices: 1: Search Button with a search icon, 2: Custom Button set by parameter 'CustomButtonContent' or None.

public enum ButtonType { Search, Custom, None }

If Custom ButtonType please use CustomButtonContent="InputAnyTextorHTMLContentUWantInTheButton"

[Parameter] public string? CustomButtonContent { get; set; }

Styling Parameters:

// Optional class of the input box for custom CSS styling. [Parameter] public string? InputFieldClass { get; set; } // Optional class of the container of this component for custom CSS styling. [Parameter] public string? ContainerClass { get; set; } // Optional class of the button for custom CSS styling. [Parameter] public string? ButtonClass { get; set; }