AutoComplete
TsgcHTMLComponent_AutoComplete — render een tekstinvoer ondersteund door een HTML5-<datalist> met suggesties, zonder JavaScript, in Delphi, C++ Builder en .NET.
TsgcHTMLComponent_AutoComplete — render een tekstinvoer ondersteund door een HTML5-<datalist> met suggesties, zonder JavaScript, in Delphi, C++ Builder en .NET.
Een invoercomponent dat een Bootstrap-form-control uitstuurt, gekoppeld aan een native <datalist>. Voeg de suggestiestrings toe aan Items en lees dan de HTML-eigenschap.
TsgcHTMLComponent_AutoComplete
Bootstrap-invoer + HTML5 <datalist>
Delphi, C++ Builder, .NET
Stel Name en Label_ in, duw suggestiestrings in Items en lees dan HTML (of plaats het in een TsgcHTMLTemplate_Bootstrap-pagina).
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>De members die je het vaakst gebruikt.
Name stelt de name van de invoer in; Label_ rendert een form-label erboven; Value vult het veld vooraf in.
Items (een TStringList) bevat de suggestiestrings die <option>-vermeldingen worden binnen de <datalist>.
Placeholder toont hinttekst; MinLength bepaalt hoeveel tekens worden getypt voordat suggesties verschijnen (standaard 1).
AutoCompleteID stelt de element-id in die gedeeld wordt door de invoer en de gekoppelde <datalist>; standaard is dit sgcAutoComplete.
HTML retourneert de mb-3-wrapper met het label, de form-control-invoer en de gevulde <datalist>.
De geërfde Section, ColumnWidth en RowGroup plaatsen het veld op een TsgcHTMLPageBuilder-raster.