[VB.Net] Comment faire pour simuler l'autocomplete sur un DropDownList ?

Version imprimable

29/05/2006, 17h58
Taore

[VB.Net] Comment faire pour simuler l'autocomplete sur un DropDownList ?

Bonjour,

J'aimerais que l'utilisateur de mon interface aspx soit capable de choisir un élément de ma dropdownlist en tappant les premières lettres.

Exemple : J'ai "chat", "écureuille", "hibou" ...

Je voudrais qu'en tappant "c" et "h" il soit sélectionné chat au lieu de hibou. (parce que présentement, c'est seulement la première lettre qui influence la sélection)

J'ai fait quelques recherche et j'ai vu que sur certains contrôle il y avait la propriété autocomplete, mais celà n'existe pas avec un dropdownlist.

Quelqu'un peu m'aider svp?

Merci à l'avance!
29/05/2006, 18h14
slyer

regarde sur atlas.asp.net

ce que j'utilise moi pour les combox box marche très bien, ci joint le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
Private Sub combobox_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles combobox.KeyPress
        If Char.IsControl(e.KeyChar) Then Return
        With Me.cmbFamilies
            Dim ToFind As String = .Text.Substring(0, .SelectionStart) '& e.KeyChar
            Dim Index As Integer = .FindStringExact(ToFind)
            If Index = -1 Then Index = .FindString(ToFind)
            If Index = -1 Then Return
            .SelectedIndex = Index
            .SelectionStart = ToFind.Length
            .SelectionLength = .Text.Length - .SelectionStart
            e.Handled = True
        End With
    End Sub

;)

29/05/2006, 19h04
FremyCompany

Atlas, en effet... Atlas = AJAX + Service web.
Très efficace.
29/05/2006, 19h08
Taore

Merci slyer je vais regarder ça.
***

neuropathie,
Est-ce que un combobox est la même chose qu'une dropdownlist? parce que je n'ai pas l'event keypress. Je n'ai pas non plus de contrôle qui se nomme combobox dans mon menu d'outil. (J'utilise VB.NET 2003)
29/05/2006, 19h50
Taore

Quelqu'un utilise Atlas?

J'aimerais avoir des commentaires sur ce framework avant de l'installer. Je veux être sur que ça valle la peine. Et est-ce compatible avec vb.net 2003? Car ils parlent du 2005...

Merci
29/05/2006, 20h28
FremyCompany

pour utiliser l'évent onkeypress (JS) tu dois OBLIGATOIREMENT passer par la balise. Il te dira que la propriété n'existe pas mais en fait, il la rajoutera on controle HTML.

Je ne sais pas si AJAX est compatible 2003.
29/05/2006, 21h03
Taore

Pour ce qui est des tests que j'ai effectué avec Atlas et vb.net 2003, c'est pas très concluent...

Je vais plutot regarder vers le javaScript.

J'ai trouvé quelque chose sur Internet qui fonctionne pour les lists d'item sans accents dans la dropdownlist. Il faut juste que je modifie le tout pour que ça prennent les accents en compte. J'ai arrangé le bout des entrées de lettre (onkeypress) il reste juste à vérifier si le nom de la liste contiens des accents et à les traiter sans accents. Mais j'ai aucune idée comment faire...

Quelqu'un peut m'aider?

Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
var toFind = ""; // Variable that acts as keyboard buffer
var timeoutID = ""; // Process id for timer (used when stopping
// the timeout)
timeoutInterval = 250; // Milliseconds. Shorten to cause keyboard
// buffer to be cleared faster
var timeoutCtr = 0; // Initialization of timer count down
var timeoutCtrLimit = 3 ; // Number of times to allow timer to count
// down
var oControl = ""; // Maintains a global reference to the
// control that the user is working with.
 
function listbox_onkeypress(){
 
	// This function is called when the user presses a key while focus is in
	// the listbox. It maintains the keyboard buffer.
	// Each time the user presses a key, the timer is restarted.
	// First, stop the previous timer; this function will restart it.
	window.clearInterval(timeoutID)
 
	// Which control raised the event? We'll need to know which control to
	// set the selection in.
	oControl = window.event.srcElement;
 
	var keycode = window.event.keyCode;
	if(keycode >= 32 ){
		//What character did the user type?
		//alert("Vous avez tapé : " + keycode);
		if (keycode==101 || keycode==200 || keycode==201 || keycode==202 || keycode==232 || keycode==233 || keycode=234 ){
                      keycode=69;} //############test à moi pour les accents...############
		var c = String.fromCharCode(keycode);
		c = c.toUpperCase();
		// Convert it to uppercase so that comparisons don't fail
		toFind += c ; // Add to the keyboard buffer
		find(); // Search the listbox
		timeoutID = window.setInterval("idle()", timeoutInterval);
		// Restart the timer
	}
}
 
function listbox_onblur(){
	// This function is called when the user leaves the listbox.
 
	window.clearInterval(timeoutID);
	resetToFind();
}
 
function idle(){
	// This function is called if the timeout expires. If this is the
	// third (by default) time that the idle function has been called,
	// it stops the timer and clears the keyboard buffer
 
	timeoutCtr += 1
	if(timeoutCtr > timeoutCtrLimit){
		resetToFind();
		timeoutCtr = 0;
		window.clearInterval(timeoutID);
	}
}
 
function resetToFind(){
	toFind = ""
}
 
 
function find(){
	// Walk through the select list looking for a match
 
	var allOptions = document.all.item(oControl.id);
 
	for (i=0; i < allOptions.length; i++){
		// Gets the next item from the listbox
		nextOptionText = allOptions(i).text.toUpperCase();
 
		// By default, the values in the listbox and as entered by the
		// user are strings. This causes a string comparison to be made,
		// which is not correct for numbers (1 < 11 < 2).
		// The following lines coerce numbers into an (internal) number
		// format so that the subsequent comparison is done as a
		// number (1 < 2 < 11).
 
		if(!isNaN(nextOptionText) && !isNaN(toFind) ){
			nextOptionText *= 1; // coerce into number
			toFind *= 1;
		}
 
		// Does the next item match exactly what the user typed?
		if(toFind == nextOptionText){
			// OK, we can stop at this option. Set focus here
			oControl.selectedIndex = i;
			window.event.returnValue = false;
			break;
		}
 
		// If the string does not match exactly, find which two entries
		// it should be between.
		if(i < allOptions.length-1){
 
			// If we are not yet at the last listbox item, see if the
			// search string comes between the current entry and the next
			// one. If so, place the selection there.
 
			lookAheadOptionText = allOptions(i+1).text.toUpperCase() ;
			if( (toFind > nextOptionText) &&
			(toFind < lookAheadOptionText) ){
				oControl.selectedIndex = i+1;
				window.event.cancelBubble = true;
			window.event.returnValue = false;
			break;
			} // if
		} // if
 
		else{
 
			// If we are at the end of the entries and the search string
			// is still higher than the entries, select the last entry
 
			if(toFind > nextOptionText){
				oControl.selectedIndex = allOptions.length-1 // stick it
				// at the end
				window.event.cancelBubble = true;
				window.event.returnValue = false;
				break;
			} // if
		} // else
	} // for
} // function

30/05/2006, 17h52
Taore

Quelqu'un connais une fonction qui sert à retirer les accents d'un string???
30/05/2006, 20h56
FremyCompany

==> Forum JS...

Code:

string.replace(new RegExp("é","gi"),"e");
30/05/2006, 21h04
Taore

Oups... Dsl que ça ai changé de langage de programmation entre temps... :(

Est-ce qu'il y a moyen de mettre la partie sur javascript sous le bon topic?
30/05/2006, 22h35
Taore
Problème résolu!

J'ai ajouter ceci :
Code:

1 2 string = string.replace(String.fromCharCode(201), "E");
Pour chaque accent que je veux remplacer. c'est pas très chic, mais ça fonctionne.

Tout ça pour régler un dropdownlist...
31/05/2006, 14h14
FremyCompany
Citation:
Envoyé par Taore

Code:

1 2 string = string.replace(String.fromCharCode(201), "E");
Je ne veux pas te contrarier mais ca ne marchera pas toujours ton truc... "télé" deviendra "telé"...
En JS, pour faire un remplacement de masse, tu dois passer par une RegExp...

Code:

string = string.replace(new RegExp(String.fromCharCode(201), "gi"), "E");

Le "gi" signifie :
1/ g = autant de fois que l'expression peut être trouvée;
2/ i = quelque soit la casse de l'expression (ex = e ou E);
31/05/2006, 14h44
Taore
C'est vrai merci, j'avais pas remarqué.

Donc je résume ce qui a fonctionné :

J'ai fait un js avec le code que j'ai donné plus haut, modifié un peu pour effacer les accents des string à traiter avec ce que FremyCompagny a donné.
Code:

1 2 string = string.replace(new RegExp(String.fromCharCode(201), "gi"), "E"); //Ça c'est pour "É" seulement, j'ai ajouté les autres que j'avais besoin.
Ensuite, j'ai inséré le script dans ma page aspx avec :

Code:

<script src="monJavaScript.js" type="text/javascript"></script>

et j'ai ajouté cette propriété dans la balise de ma dropdownlist :

Code:

onkeypress="listbox_onkeypress()"

Ça me sort une erreur en l'écrivant, mais ça passe à la compilation.
31/05/2006, 15h22
FremyCompany

Attention, cependant, car l'ID client et l'ID serveur sont différents...
sur un ctrl, tu as deux property : ID == serveur & ClientID == client.
Tu peux bien sur les utiliser, mais c'est pas pratique (tu dois génerer un script JS depuis ASP .Net).
Sinon, change ta fonction en function MyName (dropdownlist) {}
et remplace le onkeypress par "MyName(this)"
31/05/2006, 17h03
Taore

Je ne vois pas où je me sert de l'id serveur et client...:oops:

Et puis je crois que je n'ai pas vraiment le choix de me générer un js dans mon projet asp.net car j'ai besoin de cette fonctionnalité dans plusieurs pages. Donc, je l'importe dans les pages que j'ai besoin.

Si ta manière de faire est plus efficace que la mienne, peux-tu m'expliquer plus svp? Je ne voix pas où tu veux en venir...

J'aimerais bien l'apprendre.:)

pour récuperer le controle qui a exécuté l'event, ton script utilise

Code:

oControl = window.event.srcElement;

Je veux bien, mais je suis sur qu'il y a des masses de navigateurs qui ne possèdent pas window.event.
Deplus, si un autre onkeypress intervenait avant que la ligne ne soit exécutée, elle renverrait un mauvais controle HTML...
je te propose donc de faire

Code:

<asp:DropDownList onkeypress="listbox_onkeypress(this)" blablabla></asp:DropDownList>

En effet, le this reverra le controle html qui a généré l'event dans TOUS les navigateurs
Voci alors le nouveau visage de ta fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
var toFind = ""; // Variable that acts as keyboard buffer
var timeoutID = ""; // Process id for timer (used when stopping
// the timeout)
timeoutInterval = 250; // Milliseconds. Shorten to cause keyboard
// buffer to be cleared faster
var timeoutCtr = 0; // Initialization of timer count down
var timeoutCtrLimit = 3 ; // Number of times to allow timer to count
// down
var oControl = ""; // Maintains a global reference to the
// control that the user is working with.

function listbox_onkeypress(ctrl){

	// This function is called when the user presses a key while focus is in
	// the listbox. It maintains the keyboard buffer.
	// Each time the user presses a key, the timer is restarted.
	// First, stop the previous timer; this function will restart it.
	window.clearInterval(timeoutID)
	
	// Which control raised the event? We'll need to know which control to
	// set the selection in. 
             // Si ctrl est valide (non nul, non undefined, on l'utilise. Sinon, on essaie window.event
	oControl = (ctrl != null || typeof (ctrl) != "undefined") ? ctrl : window.event.srcElement;
	
	var keycode = window.event.keyCode;
	if(keycode >= 32 ){
		//What character did the user type?
		//alert("Vous avez tapé : " + keycode);
		if (keycode==101 || keycode==200 || keycode==201 || keycode==202 || keycode==232 || keycode==233 || keycode=234 ){
                      keycode=69;} //############test à moi pour les accents...############
		var c = String.fromCharCode(keycode);
		c = c.toUpperCase();
		// Convert it to uppercase so that comparisons don't fail
		toFind += c ; // Add to the keyboard buffer
		find(); // Search the listbox
		timeoutID = window.setInterval("idle()", timeoutInterval);
		// Restart the timer
	}
}

function listbox_onblur(){
	// This function is called when the user leaves the listbox.

	window.clearInterval(timeoutID);
	resetToFind();
}

function idle(){
	// This function is called if the timeout expires. If this is the
	// third (by default) time that the idle function has been called,
	// it stops the timer and clears the keyboard buffer
	
	timeoutCtr += 1
	if(timeoutCtr > timeoutCtrLimit){
		resetToFind();
		timeoutCtr = 0;
		window.clearInterval(timeoutID);
	}
}

function resetToFind(){
	toFind = ""
}


function find(){
	// Walk through the select list looking for a match
	
	var allOptions = document.all.item(oControl.id);
	
	for (i=0; i < allOptions.length; i++){
		// Gets the next item from the listbox
		nextOptionText = allOptions(i).text.toUpperCase();
	
		// By default, the values in the listbox and as entered by the
		// user are strings. This causes a string comparison to be made,
		// which is not correct for numbers (1 < 11 < 2).
		// The following lines coerce numbers into an (internal) number
		// format so that the subsequent comparison is done as a
		// number (1 < 2 < 11).
	
		if(!isNaN(nextOptionText) && !isNaN(toFind) ){
			nextOptionText *= 1; // coerce into number
			toFind *= 1;
		}

		// Does the next item match exactly what the user typed?
		if(toFind == nextOptionText){
			// OK, we can stop at this option. Set focus here
			oControl.selectedIndex = i;
			window.event.returnValue = false;
			break;
		}
	
		// If the string does not match exactly, find which two entries
		// it should be between.
		if(i < allOptions.length-1){
	
			// If we are not yet at the last listbox item, see if the
			// search string comes between the current entry and the next
			// one. If so, place the selection there.
	
			lookAheadOptionText = allOptions(i+1).text.toUpperCase() ;
			if( (toFind > nextOptionText) &&
			(toFind < lookAheadOptionText) ){
				oControl.selectedIndex = i+1;
				window.event.cancelBubble = true;
			window.event.returnValue = false;
			break;
			} // if
		} // if

		else{

			// If we are at the end of the entries and the search string
			// is still higher than the entries, select the last entry

			if(toFind > nextOptionText){
				oControl.selectedIndex = allOptions.length-1 // stick it
				// at the end
				window.event.cancelBubble = true;
				window.event.returnValue = false;
				break;
			} // if
		} // else
	} // for
} // function

31/05/2006, 19h18
Taore

Ok merci, j'ai compris.

Je pensais que window.event.srcElement était supporté partout.

Comme tu dis, je vais être sur que la fonction va être relié au bon contrôle.

Merci encore! ;)
31/05/2006, 19h53
FremyCompany

Citation:

Envoyé par Taore

Ok merci, j'ai compris.

Je pensais que window.event.srcElement était supporté partout.

Comme tu dis, je vais être sur que la fonction va être relié au bon contrôle.

Merci encore! ;)

Pour faire plus simple ton code est IE Only window.event est IE Only
document.all est IE Only (function Find())
...
Je te conseille donc de changer le code...
31/05/2006, 20h05
Taore

J'ai testé avec firefox tout à l'heure et celà fonctionnait...
31/05/2006, 20h09
FremyCompany

Vraiment ? ah bon... C'est que FireFox s'est adapté à IE...
C'est bon alors :)
Si tu as de pbs, poste ton code sur le forum JS.
Il y a la des gens qui sont encore plus calé que moi.
31/05/2006, 20h11
Taore

Ok merci,

Tu m'as vraiment fait peur avec ça...

Ça me tentais pas de tout recommencer...

(La version de firefox que j'ai testé c'est 1.5.0.3)