Componente AutoComplete — sgcHTML

De un vistazo

TsgcHTMLComponent_AutoComplete

Un componente de input que genera un form-control de Bootstrap conectado a un <datalist> nativo. Añade las cadenas de sugerencia a Items y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_AutoComplete

Genera

Input de Bootstrap + <datalist> de HTML5

Familia

Formularios y Entradas

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, añade sugerencias, genéralo

Define Name y Label_, añade cadenas de sugerencia a Items y luego lee HTML (o insértalo en una 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>

Referencia

Propiedades y métodos clave

Los miembros que más utilizarás.

Campo

Name define el name del input; Label_ genera un form-label encima; Value rellena el campo de antemano.

Sugerencias

Items (una TStringList) contiene las cadenas de sugerencia que se convierten en entradas <option> dentro del <datalist>.

Comportamiento

Placeholder muestra texto de ayuda; MinLength define cuántos caracteres se escriben antes de que aparezcan las sugerencias (el valor por defecto es 1).

Identidad

AutoCompleteID define el id del elemento que comparten el input y su <datalist> vinculado; su valor por defecto es sgcAutoComplete.

Salida

HTML devuelve el contenedor mb-3 que incluye la etiqueta, el input form-control y el <datalist> ya relleno.

Disposición

Las propiedades heredadas Section, ColumnWidth y RowGroup colocan el campo en una cuadrícula TsgcHTMLPageBuilder.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con todo el código fuente.	Abrir

AutoComplete