AutoComplete
TsgcHTMLComponent_AutoComplete — 候補の HTML5 <datalist> を備えたテキスト入力を、JavaScript を一切必要とせずに Delphi、C++ Builder、.NET でレンダリングします。
TsgcHTMLComponent_AutoComplete — 候補の HTML5 <datalist> を備えたテキスト入力を、JavaScript を一切必要とせずに Delphi、C++ Builder、.NET でレンダリングします。
ネイティブな <datalist> に接続された Bootstrap の form-control を出力する入力コンポーネントです。候補の文字列を Items に追加したら、HTML プロパティを読み取ります。
TsgcHTMLComponent_AutoComplete
Bootstrap の入力 + HTML5 <datalist>
Delphi, C++ Builder, .NET
Name と Label_ を設定し、候補の文字列を Items に追加したら、HTML を読み取ります（または 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>最もよく使うメンバー。
Name は入力の name を設定します。Label_ はその上に form-label をレンダリングし、Value はフィールドに初期値を設定します。
Items（TStringList）は、<datalist> 内の <option> エントリになる候補の文字列を保持します。
Placeholder はヒントテキストを表示します。MinLength は候補が表示されるまでに入力する文字数を設定します（デフォルトは 1）。
AutoCompleteID は、入力とそれにリンクされた <datalist> が共有する要素の id を設定します。デフォルトは sgcAutoComplete です。
HTML は、ラベル、form-control 入力、データを設定済みの <datalist> を含む mb-3 ラッパーを返します。
継承された Section、ColumnWidth、RowGroup が、TsgcHTMLPageBuilder のグリッド上にフィールドを配置します。