AutoComplete
TsgcHTMLComponent_AutoComplete — renderuje pole tekstowe oparte na liście <datalist> HTML5 z sugestiami, bez potrzeby pisania JavaScript, w Delphi, C++ Builder i .NET.
TsgcHTMLComponent_AutoComplete — renderuje pole tekstowe oparte na liście <datalist> HTML5 z sugestiami, bez potrzeby pisania JavaScript, w Delphi, C++ Builder i .NET.
Komponent pola, który generuje element form-control Bootstrap powiązany z natywną listą <datalist>. Dodaj ciągi sugestii do Items, a następnie odczytaj właściwość HTML.
TsgcHTMLComponent_AutoComplete
Pole Bootstrap + <datalist> HTML5
Delphi, C++ Builder, .NET
Ustaw Name i Label_, przekaż ciągi sugestii do Items, a następnie odczytaj HTML (albo umieść go na stronie 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>Składniki, po które sięgasz najczęściej.
Name ustawia atrybut name pola; Label_ renderuje nad nim form-label; Value wstępnie wypełnia pole.
Items (TStringList) przechowuje ciągi sugestii, które stają się pozycjami <option> wewnątrz <datalist>.
Placeholder wyświetla tekst podpowiedzi; MinLength ustawia, ile znaków trzeba wpisać, zanim pojawią się sugestie (domyślnie 1).
AutoCompleteID ustawia atrybut id elementu współdzielony przez pole i powiązaną listę <datalist>; domyślnie sgcAutoComplete.
HTML zwraca kontener mb-3 zawierający etykietę, pole form-control i wypełnioną listę <datalist>.
Dziedziczone Section, ColumnWidth i RowGroup umieszczają pole na siatce TsgcHTMLPageBuilder.