AutoComplete

TsgcHTMLComponent_AutoComplete — affichez un champ de saisie adossé à une <datalist> HTML5 de suggestions, sans aucun JavaScript, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_AutoComplete

Un composant de saisie qui émet un form-control Bootstrap câblé à une <datalist> native. Ajoutez les chaînes de suggestion à Items, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_AutoComplete

Produit

Saisie Bootstrap + <datalist> HTML5

Famille

Formulaires & Saisies

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-le, ajoutez des suggestions, affichez-le

Définissez Name et Label_, ajoutez des chaînes de suggestion dans Items, puis lisez HTML (ou intégrez-le dans une page 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>

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Champ

Name définit le name du champ ; Label_ rend un form-label au-dessus ; Value pré-remplit le champ.

Suggestions

Items (une TStringList) contient les chaînes de suggestion qui deviennent des entrées <option> dans la <datalist>.

Comportement

Placeholder affiche un texte d'indication ; MinLength définit le nombre de caractères à saisir avant l'apparition des suggestions (1 par défaut).

Identité

AutoCompleteID définit l'id de l'élément partagé par le champ et sa <datalist> liée ; sa valeur par défaut est sgcAutoComplete.

Sortie

HTML renvoie le conteneur mb-3 contenant le libellé, le champ form-control et la <datalist> remplie.

Mise en page

Les propriétés héritées Section, ColumnWidth et RowGroup placent le champ sur une grille TsgcHTMLPageBuilder.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir