AutoComplete

TsgcHTMLComponent_AutoComplete — 渲染由 HTML5 <datalist> 建议支持的文本输入,无需 JavaScript,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_AutoComplete

一个输入组件,发出接入原生 <datalist> 的 Bootstrap form-control。将建议字符串添加到 Items,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_AutoComplete

渲染为

Bootstrap 输入框 + HTML5 <datalist>

语言

Delphi, C++ Builder, .NET

创建它、添加建议、渲染它

设置 NameLabel_,将建议字符串推入 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 设置输入框的 nameLabel_ 在其上方渲染一个 form-labelValue 预填字段。

建议

Items(一个 TStringList)保存建议字符串,这些字符串会成为 <datalist> 中的 <option> 条目。

行为

Placeholder 显示提示文本;MinLength 设置在显示建议之前需要输入多少个字符(默认为 1)。

标识

AutoCompleteID 设置输入框及其关联 <datalist> 共享的元素 id;默认为 sgcAutoComplete

输出

HTML 返回 mb-3 包装器,其中包含标签、form-control 输入框和已填充的 <datalist>

布局

继承的 SectionColumnWidthRowGroup 将字段放置在 TsgcHTMLPageBuilder 网格上。

继续探索

所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,为您的 Delphi、C++ Builder 或 .NET Web 应用添加自动完成输入框。