AutoComplete
TsgcHTMLComponent_AutoComplete — render a text input backed by an HTML5 <datalist> of suggestions, with no JavaScript required, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_AutoComplete — render a text input backed by an HTML5 <datalist> of suggestions, with no JavaScript required, in Delphi, C++ Builder and .NET.
An input component that emits a Bootstrap form-control wired to a native <datalist>. Add the suggestion strings to Items, then read the HTML property.
TsgcHTMLComponent_AutoComplete
Bootstrap input + HTML5 <datalist>
Delphi, C++ Builder, .NET
Set Name and Label_, push suggestion strings into Items, then read HTML (or drop it into a TsgcHTMLTemplate_Bootstrap page).
uses
sgcHTML_Component_AutoComplete;
var
oAuto: TsgcHTMLComponent_AutoComplete;
begin
oAuto := TsgcHTMLComponent_AutoComplete.Create(nil);
try
oAuto.Name := 'country';
oAuto.Label_ := 'Country';
oAuto.Placeholder := 'Start typing...';
oAuto.MinLength := 2;
oAuto.Items.Add('Spain');
oAuto.Items.Add('France');
oAuto.Items.Add('Germany');
WebModule.Response := oAuto.HTML; // <input> + <datalist>
finally
oAuto.Free;
end;
end;// includes: sgcHTML_Component_AutoComplete.hpp
TsgcHTMLComponent_AutoComplete *oAuto = new TsgcHTMLComponent_AutoComplete(NULL);
try
{
oAuto->Name = "country";
oAuto->Label_ = "Country";
oAuto->Placeholder = "Start typing...";
oAuto->MinLength = 2;
oAuto->Items->Add("Spain");
oAuto->Items->Add("France");
oAuto->Items->Add("Germany");
String html = oAuto->HTML; // <input> + <datalist>
}
__finally
{
delete oAuto;
}using esegece.sgcWebSockets;
var auto = new TsgcHTMLComponent_AutoComplete();
auto.Name = "country";
auto.Label_ = "Country";
auto.Placeholder = "Start typing...";
auto.MinLength = 2;
auto.Items.Add("Spain");
auto.Items.Add("France");
auto.Items.Add("Germany");
string html = auto.HTML; // <input> + <datalist>The members you reach for most often.
Name sets the input's name; Label_ renders a form-label above it; Value pre-fills the field.
Items (a TStringList) holds the suggestion strings that become <option> entries inside the <datalist>.
Placeholder shows hint text; MinLength sets how many characters are typed before suggestions appear (defaults to 1).
AutoCompleteID sets the element id shared by the input and its linked <datalist>; it defaults to sgcAutoComplete.
HTML returns the mb-3 wrapper containing the label, the form-control input and the populated <datalist>.
Inherited Section, ColumnWidth and RowGroup place the field on a TsgcHTMLPageBuilder grid.