AutoComplete

TsgcHTMLComponent_AutoComplete — renderize uma entrada de texto apoiada por uma <datalist> HTML5 de sugestões, sem necessidade de JavaScript, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_AutoComplete

Um componente de entrada que emite um form-control Bootstrap conectado a uma <datalist> nativa. Adicione as strings de sugestão a Items e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_AutoComplete

Renderiza

Entrada Bootstrap + <datalist> HTML5

Família

Formulários & Entradas

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, adicione sugestões, renderize

Defina Name e Label_, adicione strings de sugestão a Items e então leia HTML (ou insira-o em uma página 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>

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Campo

Name define o name da entrada; Label_ renderiza um form-label acima dela; Value pré-preenche o campo.

Sugestões

Items (uma TStringList) contém as strings de sugestão que se tornam entradas <option> dentro da <datalist>.

Comportamento

Placeholder mostra um texto de dica; MinLength define quantos caracteres são digitados antes de as sugestões aparecerem (padrão 1).

Identidade

AutoCompleteID define o id do elemento compartilhado pela entrada e sua <datalist> vinculada; o padrão é sgcAutoComplete.

Saída

HTML retorna o wrapper mb-3 contendo o label, a entrada form-control e a <datalist> preenchida.

Layout

Os herdados Section, ColumnWidth e RowGroup posicionam o campo em uma grade TsgcHTMLPageBuilder.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir