AutoComplete
TsgcHTMLComponent_AutoComplete — Delphi, C++ Builder 및 .NET에서 JavaScript 없이 제안 목록의 HTML5 <datalist>로 뒷받침되는 텍스트 입력을 렌더링합니다.
TsgcHTMLComponent_AutoComplete — Delphi, C++ Builder 및 .NET에서 JavaScript 없이 제안 목록의 HTML5 <datalist>로 뒷받침되는 텍스트 입력을 렌더링합니다.
네이티브 <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 그리드에 배치합니다.