AutoComplete
TsgcHTMLComponent_AutoComplete — renderizza un campo di testo supportato da una <datalist> HTML5 di suggerimenti, senza richiedere JavaScript, in Delphi, C++ Builder e .NET.
TsgcHTMLComponent_AutoComplete — renderizza un campo di testo supportato da una <datalist> HTML5 di suggerimenti, senza richiedere JavaScript, in Delphi, C++ Builder e .NET.
Un componente di input che emette un form-control Bootstrap collegato a una <datalist> nativa. Aggiungi le stringhe di suggerimento a Items, quindi leggi la proprietà HTML.
TsgcHTMLComponent_AutoComplete
Input Bootstrap + <datalist> HTML5
Delphi, C++ Builder, .NET
Imposta Name e Label_, inserisci le stringhe di suggerimento in Items, quindi leggi HTML (oppure inseriscilo in una pagina TsgcHTMLTemplate_Bootstrap).
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>I membri che utilizzerai più spesso.
Name imposta il name dell'input; Label_ renderizza una form-label sopra di esso; Value precompila il campo.
Items (una TStringList) contiene le stringhe di suggerimento che diventano voci <option> all'interno della <datalist>.
Placeholder mostra il testo suggerito; MinLength imposta quanti caratteri digitare prima che compaiano i suggerimenti (il valore predefinito è 1).
AutoCompleteID imposta l'id dell'elemento condiviso dall'input e dalla sua <datalist> collegata; il valore predefinito è sgcAutoComplete.
HTML restituisce il wrapper mb-3 che contiene l'etichetta, l'input form-control e la <datalist> popolata.
Le proprietà ereditate Section, ColumnWidth e RowGroup posizionano il campo su una griglia TsgcHTMLPageBuilder.