Autocomplétion syntaxtique style VB6

**nihaoma** · 16/04/2007, 09h29

Bonjour à tous,

Je cherche à développer un script d'autocomplétion un peu particulier.

Pour les fonctionnalités d'autocomplétion pure, pas de soucis, y'a plein d'exemple sur le net et meme sur ce site.

Pour ma part, j'ai besoin de faire une autocomplétion un peu particulière, en fait j'ai besoin sur un champ texte de faire un peu comme sous VB6 (pour ceux qui connaissent). grosso modo c'est pour traiter des objects de programmation, donc quand je commence à saisir, il m'affiche tous les objets en fonction des lettres déja saisies, puis je met un point, la il m'affiche que les propriétés et méthodes de l'objet saisi avant le point, etc. ... Tout ceci, je sais le faire sans problème en utilisant le position du curseur de saisi et en allant chercher les "bornes" (a savoir, soit le debut ou la fin de la chaine, soit des points, soit des parenthèses pour les paramètres, etc.)

Mon problème est plus graphique, en fait, j'aimerai affiche le DIV contenant les propositions là ou y'en à besoin, c'est à dire caller le bord gauche du DIV au niveau de la première lettre du "mot" en cours, et non pas toujours sur toute la longueur du champ de saisi comme le proposent tous les scripts d'auto-complétion que j'ai pu trouver sur le net...Pour faire ca, j'aurai besoin de connaitre l'offset en pixel du curseur de saisi par rapport au left du champ de saisi, mais je ne trouve nulle part cette propriété, et son calcul, meme en connaissant le nombre de caractères avant le curseur me parait difficile puisqu'il dépent de la police utilisée, de sa taille et aussi des lettres saisie (si on utilise pas une police à largeur fixe)...

quelqu'un aurait une idée pour me sortir de ce problème ???

merci par avance pour vos idées !

cordialement

NiHaoMa

**Djakisback** · 17/04/2007, 12h34

Salut,
un début de solution serait de créer un span en position:absolute dans un body mais il ya 2 problèmes si tu utilises le designMode d'un document, Gecko/Midas permet le redimensionnement direct d'un div/span etc. L'autre solution serait de l'ajouter dans un div/span ou p mais il faudrait soit simuler le designMode en capturant toutes les entrées clavier, soit de taper dans un textarea en sous-impression mais tu seras obligé de fixer la même police dans le textarea et dans le div. Le plus simple resterait donc quand même de forcer la police utilisée et de calculer manuellement la position du curseur car à ma connaissance tu ne peux pas récupérer les coordonnées du curseur en px.
Bye

textarea :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<textarea id="t" cols="20" rows="20" style="position:absolute;color:white;font-family:arial;font-size:12px;">
</textarea>
<div id="i" style="position:absolute;padding:0px;font-family:arial;font-size:12px;"></div>
 
<script>
// IE
if(document.attachEvent) {
	document.attachEvent('onkeyup', processKey);
	document.attachEvent('onkeydown', processKey);
}
// Gecko
else if(document.addEventListener) {
	document.addEventListener('keyup', processKey, false);
	document.addEventListener('keydown', processKey, false);
}
 
// Callbacks des événements
function processKey(evnt) {
	if(span = document.getElementById("d"))	{
		document.getElementById("i").removeChild(span);
	}
	document.getElementById("i").innerHTML = document.getElementById("t").value + '<span id="d" style="position:absolute;width:20px;border:1px solid #666666"><p>ab</p><p>abc</p></span>';
}
</script>

designMode :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<iframe id="edIframe"></iframe>
<script>
 
// Définition des variables globales
edFrameWindow = document.getElementById('edIframe').contentWindow;
edFrameDocument = document.getElementById('edIframe').contentWindow.document;
edFrameDocument.designMode = "on";
// Ecriture du body de l'iframe
edFrameDocument.open();
edFrameDocument.write('<body></body>');
edFrameDocument.close();
 
// IE
if(edFrameDocument.attachEvent) {
	edFrameDocument.attachEvent('onkeydown', processKeyDown);
}
// Gecko
else if(edFrameDocument.addEventListener) {
	edFrameDocument.addEventListener('keydown', processKeyDown, false);
}
 
// Callbacks des événements
function processKeyDown(evnt) {
	showDiv();
}
 
function showDiv() {
	if(span = document.getElementById("d"))	{
		edFrameDocument.removeChild(span);
	}
 
   // Création du span
	span = edFrameDocument.createElement("span");
	span.setAttribute("style", "position:absolute;width:20px;border:1px solid #666666");
	span.setAttribute("id", "d");
	span.innerHTML = "<p>tytry</p><p>ytuyt</p>";
 
	// IE
	if(edFrameDocument.selection)	{
		edFrameDocument.selection.createRange().pasteHTML(span.outerHTML);
	}
	// Gecko
	else	{
		edFrameWindow.getSelection().getRangeAt(0).insertNode(span);
	}
}
</script>

Tu peux utiliser le même span pas la peine de le recréer à chaque fois

Autre chose, une copie avec innerHTML peut prendre beaucoup de temps dans la soluce 1 tu peux créer/copier le noeud plutot que de passer par innerHTML. Enfin perso je ferais ca en Java ^^.

Autocomplétion syntaxtique style VB6

JavaScript

Discussions similaires

Partager

Partager