Le complètement ou complètement automatique, ou encore par anglicisme complétion ou autocomplétion, est une fonctionnalité informatique permettant à l'utilisateur de limiter la quantité d'informations qu'il saisit avec son clavier, en se voyant proposer un complément qui pourrait convenir à la chaîne de caractères qu'il a commencé à taper. cf wikipédia
Dans cet exemple nous allons voir comment fonctionne l'autoCompletion à l'aide d'une liste de pays.
1) Création du WebService
Dans un premier temps, il faut créer le WebService qui renverra la liste des pays commençants par la saisie de l'utilisateur.
Ici le fichier du WebService se nomme "MyService.asmx"
a) Sans base de données
Pour comprendre de façon très simple le fonctionnement de ce controle, on ne va pas utiliser de base de données, mais un simple tableau qui renverra des pays "en dur".
Code :
[WebMethod]
public string[] GetCountries(string prefixText, int count)
{
ArrayList countryList = new ArrayList();
string[] countries = { "France", "Finland", "Allemagne", "Pologne", "Italie", "Etats-Unis", "Angleterre" };
foreach (string country in countries)
{
if (country.ToLower().StartsWith(prefixText))
countryList.Add(country);
}
return (string[])countryList.ToArray(typeof(string));
}
b) Avec une base de données
L'utilisation principale de ce contrôle sera couplée en générale à une base de données. Après les versions 1.0.1** de l'AjaxControlToolkit, on peut associer une valeur avec une clé (Id en général).
Code :
[WebMethod]
public String[] GetCountries(string prefixText, int count)
{
List<String> countries = new List<string>();
string strSql = "SELECT TOP " + count + " ID, NAME FROM COUNTRY WHERE NAME like @name + '%'";
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConn"].ConnectionString))
using (SqlCommand command = new SqlCommand(strSql, conn))
{
command.Parameters.Add("@name",
on clé/valeurdonn"System.Data.SqlDbType.NVarChar).Value = prefixText;
conn.Open();
using (SqlDataReader reader = command.ExecuteReader())
{
while (reader.Read())
{
countries.Add(AutoCompleteExtender.CreateAutoCompleteItem(
(String)reader["NAME"], (String)reader["ID"].ToString()));
}
}
conn.Close();
}
return countries.ToArray();
}
2) Ajouter le contrôle au client :
Le contrôle nécessite l'utilisation d'un ScriptManager, et d'un champs caché pour récupérer la valeur associé au champ.
Code :
<asp:ScriptManager runat="server" ID="sma"></asp:ScriptManager>
<asp:TextBox runat="server" ID="txtCountry" />
<asp:HiddenField runat="server" ID="hfCountryId" />
<ajaxToolkit:AutoCompleteExtender
runat="server"
BehaviorID="AutoCompleteEx"
ID="autoComplete1"
TargetControlID="txtCountry"
ServicePath="MyService.asmx"
ServiceMethod="GetCountries"
OnClientItemSelected="txtCountry_ClientItemSelected"
MinimumPrefixLength="2"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="20"
CompletionListCssClass="AutoCompleteExtender_CompletionList"
CompletionListItemCssClass="AutoCompleteExtender_CompletionListItem"
CompletionListHighlightedItemCssClass="AutoCompleteExtender_HighlightedItem"
DelimiterCharacters=";, :">
</ajaxToolkit:AutoCompleteExtender>
<script type="text/javascript">
var txtCountry_ClientItemSelected = function(sender, e) {
$get('<%=hfCountryId.ClientID %>').value = e.get_value();
}
</script>
3) Récupérer la valeur renvoyée par le contrôle
protected void btnTest_Click(object sender, EventArgs e)
{
int id = Convert.ToInt32(hfCountryId.Value);
}
4) Appliquer un style au contrôle :
.AutoCompleteExtender_CompletionList
{
background-color: window;
color: windowtext;
padding: 1px;
font-size: small;
background-color: Gray;
}
.AutoCompleteExtender_CompletionListItem
{
text-align: left;
background-color: White;
}
.AutoCompleteExtender_HighlightedItem
{
background-color: Silver;
color: windowtext;
font-weight: bold;
font-size: small;
}
Divers :
Ajouter la connectionString au Web.Config :
<connectionStrings>
<add name="MyConn" connectionString="VotreChaine"/>
</connectionStrings>
Ajouter la référence à l'assembly dans le Web.Config :
<pages>
<controls>
………………………………
………………………………
<add tagPrefix="ajaxToolkit"
namespace="AjaxControlToolkit"
assembly="AjaxControlToolkit"/>
</controls>
</pages>