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 返回 mb-3 包装器,其中包含标签、form-control 输入框和已填充的 <datalist>。
继承的 Section、ColumnWidth 和 RowGroup 将字段放置在 TsgcHTMLPageBuilder 网格上。