Adding an autocomplete textbox using JavaScript

Process Design Form Designer
6

Bonjour @pclainchard ,

Une possibilité pourrait être d’utiliser le mode Ajax et de faire pointer la source du composant autocomplete vers une méthode du code-behind.

>> Code behind

Activer les Web methods depuis la méthode Page_Load :

protected void Page_Load(object sender, EventArgs e)
{
    base.Page_Load(sender, e);
    ScriptManager1.EnablePageMethods = true;
}

Créer la méthode permettant de récupérer les utilisateurs en se connectant à la base SQL et qui prend comme paramètre une chaîne représentant les premières lettres entrées par l’utilisateur pour sa recherche :

public static string GetUsers(string indice)
{
	var users = new List<string>();
	
	string queryString = "SELECT CONCAT(LASTNAME,' ',FIRSTNAME) as name, USERNAME FROM USERS WHERE LASTNAME LIKE '%" + indice + "%' OR FIRSTNAME LIKE '%" + indice + "%'";
	
 	using(System.Data.SqlClient.SqlConnection sqlConnection = new System.Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings["MainDbSource"].ToString()))
    {
		System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(queryString, sqlConnection);
		sqlConnection.Open();
		
		using (System.Data.SqlClient.SqlDataReader reader = command.ExecuteReader())
		{
			if(reader.HasRows)
			{
				while (reader.Read())
				{
					users.Add("{ value : '" + reader[0].ToString() + "', login : '" + reader[1].ToString() + "' }");
				}
			}
		}
		
		sqlConnection.Close();
	}
	
	return "[" + String.Join(", ", users) + "]";
}

C’est la requête SQL qui s’occupe de filtrer les résultats avec les opérations LIKE.

Ajouter l’attribut System.Web.Services.WebMethod comme entête de la méthode :

[System.Web.Services.WebMethod]
public static string GetUsers(string indice)

>> Script de l’onglet "Références Web"

Utiliser la méthode créée dans le code behind via l’objet PageMethods dans la partie source du composant autocomplete :

$("#REQUEST_FILTER").autocomplete({
	source: function(request, response){
		PageMethods.GetUsers(request.term, succes, erreur);
		function succes(resultat)
		{
			response(eval(resultat));
		}
		function erreur(resultat)
		{
			console.log("Erreur lors de la récupération des utilisateurs : " + resultat);
		}
	},
	minLength: 3,
	select: function(event, ui){
		$('#REQUEST_LOGIN').val(ui.item.login);
	}
});

La propriété term de la variable request contient la saisie de l’utilisateur. La fonction response permet de définir le résultat à fournir dans la liste.

La propriété minLength peut être utile afin d’éviter d’exécuter des requêtes retournant des résultats trop importants et n’ayant que peu de sens. Elle peut être combinée avec l’ajout d’un TOP(20) dans la requête SQL côté code behind si nécessaire (une liste de propositions d’auto-complétion est en général conçue pour une dizaine ou vingtaine de résultats au maximum).

>> Paramètres

Ne pas oublier d’activer le mode Ajax : dans l’onglet Formulaire du process, cliquer sur Configuration du formulaire (roue dentée dans la barre d’outil) puis dans l’onglet Général, cocher l’option Activer le mode Ajax (tout en bas).

Cette façon de faire me vient du sujet suivant : https://discuss.workflowgen.com/t/how-to-implement-ajax-to-call-net-code-behind-methods/230.

Cordialement,
Quentin

1 Like