# Adding an autocomplete textbox using JavaScript

**URL:** <https://discuss.workflowgen.com/t/adding-an-autocomplete-textbox-using-javascript/1369>\
**Category:** Form Designer\
**Created:** [April 15, 2019, 4:10pm UTC](https://discuss.workflowgen.com/t/adding-an-autocomplete-textbox-using-javascript/1369 "2019-04-15T16:10:39Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![qdurand](https://avatars.discourse-cdn.com/v4/letter/q/db5fbb/32.png) [@qdurand](https://discuss.workflowgen.com/u/qdurand)\
**Post date:** [December 13, 2019, 5:57pm UTC](https://discuss.workflowgen.com/t/adding-an-autocomplete-textbox-using-javascript/1369/6 "2019-12-13T17:57:40Z")

</div>

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 :

```auto
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 :

```auto
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 :

```auto
[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` :

```auto
$("#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](https://discuss.workflowgen.com/t/how-to-implement-ajax-to-call-net-code-behind-methods/230).

Cordialement,  
Quentin

---

_[View the full topic](https://discuss.workflowgen.com/t/adding-an-autocomplete-textbox-using-javascript/1369)._