# 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:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![qpomarel](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/qpomarel/32/262_2.png) [@qpomarel](https://discuss.workflowgen.com/u/qpomarel)\
**Post date:** [April 15, 2019, 4:10pm UTC](https://discuss.workflowgen.com/t/adding-an-autocomplete-textbox-using-javascript/1369/1 "2019-04-15T16:10:39Z")

</div>

## Overview

Thanks to [jQuery UI](https://jqueryui.com/), you can use a combination of JavaScript and C# code to set a textbox with an autocomplete filter.

 ![Autocomplete%20result](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/b1b7e92209aed5ebd476147c5485bb231403a84e.gif)

## Example

You can download the [`TEXTBOX_AUTOCOMPLETE`](https://advantys.box.com/s/put9c8pvr6cmyvxy6ts8pxuzpauzewhv) process as an example.

Based on [@qdurand post](https://discuss.workflowgen.com/t/adding-an-autocomplete-textbox-using-javascript/1369/6) you can download the [AUTOCOMPLETE\_PAGE\_METHODS](https://advantys.box.com/s/pebgv9mvqkpk50dvh9rk9eilvcchy0qj) process example.

### How it works

To create the autocomplete filter, we used [jQuery UI’s Autocomplete widget](https://jqueryui.com/autocomplete/).

To get the filtered list content, we execute a SQL query in the code-behind. The results will be formatted in JavaScript array format and set in a hidden field (`REQUEST_USER_LIST`)

```csharp
private void GetUser()
{
    string queryString = "SELECT CONCAT(LASTNAME,' ',FIRSTNAME) as name, USERNAME FROM USERS";
    string queryJs = "[";
    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())
                    {
                        queryJs = queryJs + "{ value :'" + reader[0].ToString() +
                            "', login :'" + reader[1].ToString() + "'},";
                    }
                    queryJs.Substring(queryJs.Length-1);
                }
                queryJs += "]";
            }
        sqlConnection.Close();
        }

    REQUEST_USER_LIST.Text = queryJs;
}

```

To add the JavaScript code, go to the **Web References** tab in the **Form configuration** panel.

 ![Find%20js%20code](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/393c86c332b64586c37d3152d59e0222d044733d.gif)

#### Code example

This example gets the value of the hidden `REQUEST_USER_LIST` field, and transforms this into a JavaScript array.

```js
if(typeof $selectedObject === "undefined") {
    $(function() {

    $("#REQUEST_ROW_USER_LIST").hide()
       var array = eval($("#REQUEST_USER_LIST").val());

        $('#REQUEST_FILTER').autocomplete({
            source : array,

             select : function(event, ui){ // When a selection is done
                $('#REQUEST_LOGIN').val(ui.item.login); // we add login in the specific field
            }
        });
    })
}

```

---

<div class="post-metadata">

**Author:** ![pclainchard](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@pclainchard](https://discuss.workflowgen.com/u/pclainchard)\
**Post date:** [November 27, 2019, 2:48pm UTC](https://discuss.workflowgen.com/t/adding-an-autocomplete-textbox-using-javascript/1369/2 "2019-11-27T14:48:27Z")

</div>

Bonjour,  
Lorsque la liste retournée par la requête SQL est trop longue a générer puis a être traitée par le javascript, comment faire pour que cette liste ne soit créée (ou requête lancée) qu’après avoir saisi 3 caractères dans le champs Research et non tout au début ?

---

<div class="post-metadata">

**Author:** ![eddy.daouk](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/eddy.daouk/32/672_2.png) [@eddy.daouk](https://discuss.workflowgen.com/u/eddy.daouk)\
**Post date:** [November 27, 2019, 8:21pm UTC](https://discuss.workflowgen.com/t/adding-an-autocomplete-textbox-using-javascript/1369/3 "2019-11-27T20:21:07Z")

</div>

Bonjour @pclainchard,

Vous pouvez essayer cela:

```auto
$('#REQUEST_FILTER').autocomplete({
            source : array,
            minLength: 3,
             select : function(event, ui){ // When a selection is done
                $('#REQUEST_LOGIN').val(ui.item.login); // we add login in the specific field
            }
        }); 

```

Voici un article concernant minLength dans JQuery:  
[https://api.jqueryui.com/autocomplete/#option-minLength](https://api.jqueryui.com/autocomplete/#option-minLength)

Cordialement,  
Eddy.

---

<div class="post-metadata">

**Author:** ![pclainchard](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@pclainchard](https://discuss.workflowgen.com/u/pclainchard)\
**Post date:** [November 28, 2019, 1:10pm UTC](https://discuss.workflowgen.com/t/adding-an-autocomplete-textbox-using-javascript/1369/4 "2019-11-28T13:10:15Z")

</div>

Bonjour Eddy

Merci pour la réponse mais le problème ne se situe pas (que) à ce niveau là.

Dans l’exemple ci-dessus, la requête SQL est lancée dès l’ouverture du formulaire et met environ 15" a s’exécuter (environ 10K users), la liste contenue dans #REQUEST\_USER\_LIST est OK mais le javascript est incapable de traiter une telle liste.

Mon idée était de ne déclencher la requête SQL modifiée que lorsque le champ #REQUEST\_FILTER contient 3 caractères dynamiquement sans avoir a cliquer sur un bouton par ex.

string queryString = “SELECT CONCAT(LASTNAME,’ ',FIRSTNAME) as name, LASTNAME, FIRSTNAME, USERNAME FROM USERS WHERE LASTNAME LIKE '” + REQUEST\_FILTER.Text + “%’”;

Cordialement,  
Pierre

---

<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

---

<div class="post-metadata">

**Author:** ![pclainchard](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@pclainchard](https://discuss.workflowgen.com/u/pclainchard)\
**Post date:** [December 20, 2019, 4:58pm UTC](https://discuss.workflowgen.com/t/adding-an-autocomplete-textbox-using-javascript/1369/7 "2019-12-20T16:58:22Z")

</div>

Bonjour @qdurand ,

C’est exactement la solution que je recherchais, elle fonctionne parfaitement bien.  
J’ai du réduire à 2 la valeur de la propriété `minLength` car la recherche de noms constitué de 2 caractères n’était pas possible sinon et malgré cela l’autocompletion est quasiment instantanée avec un annuaire constitué de près de 10 000 personnes.

Merci encore pour cette solution !

Cordialement,  
Pierre