Bonjour
je vais essayer de clarifier mon souci mais ça va être long
J'ai mon code d'autocompletion qui fonctionne sur un champ de mon formulaire:
Code Javascript :
/*
tableau des reponses necessaires à la correspondance entre la suggestion et les données
*/
suggests = new Array(
'ecole1',
'ecole2',
'ecole3'
);
/*
fonction de recalcul de l'offset top et left qui se refere à l'offsetParent pour palier au probleme de positionnement dans les tableaux
*/
function positionAbsolute(obj,mode)
{
currentValue = 0;
if (obj.offsetParent)
{
if (mode == 'top')
currentValue = obj.offsetTop;
else if (mode == 'left')
currentValue = obj.offsetLeft;
while (obj = obj.offsetParent)
if (mode == 'top')
currentValue += obj.offsetTop;
else if (mode == 'left')
currentValue += obj.offsetLeft;
}
return currentValue;
}
/*
la fonction principale qui remplit le div des differentes suggestions possibles en corrélation avec le champ input
*/
function showValue(inside)
{
divDest = document.getElementById('menuRightHidden');
divDest.innerHTML = '';
valueOfElement = '';
exist = 0;
nbOfElement = 0;
divDest.style.top = positionAbsolute(inside,'top') + inside.offsetHeight;
divDest.style.left = positionAbsolute(inside,'left');
divDest.style.width = inside.offsetWidth - 3;
for (i = 0; i < suggests.length; i++)
{
if ((suggests[i].toLowerCase()).indexOf((inside.value).toLowerCase()) != -1 && inside.value != '')
{
nbOfElement++;
exist = 1;
valueOfElement = suggests[i];
currentDiv = document.createElement("div");
currentInner = document.createTextNode(suggests[i]);
currentDiv.indice = suggests[i];
currentDiv.className = 'currentDiv';
currentDiv.onclick = function()
{
inside.value = this.indice;
divDest.style.visibility = 'hidden';
}
currentDiv.appendChild(currentInner);
divDest.appendChild(currentDiv);
}
}
if (exist == 0 || (valueOfElement.length == inside.value.length && nbOfElement == 1))
divDest.style.visibility = 'hidden'
else
divDest.style.visibility = 'visible';
}
/*initialisation de la div qui contiendra les differentes suggestions
*/
function initMenuRightDiv()
{
var completion = document.getElementById('completionConteneur');
var menuRightDiv = document.createElement("div");
menuRightDiv.className = 'hiddenDiv';
menuRightDiv.id = 'menuRightHidden';
completion.appendChild(menuRightDiv);
}
window.onload = initMenuRightDiv();
L'appel du code JS se fait de cette façon:
Code PHP :
<div id="completionConteneur">{body}</div>
onkeyup="showValue(this);"Quand je tape "ecole", 3 choix s'affichent; si je tape "ecole1", un seul choix s'affiche. Tout est OK sur le champ ecole1.
Je cherche maintenant à mettre le même code d'autocompletion sur un 2ème champ de mon formulaire (ecole2). Mais ça ne fonctionne pas, c'est à dire que rien ne s'affiche quand je tape "ecole".
J'ai donc modifié le code de cette façon:
L'appel sur le champ "ecole1" se fait comme ça:
Code PHP :
<div id="completionConteneur">{body}</div>
onkeyup="showValue(this);"L'appel sur le champ "ecole2" se fait comme ça:
Code PHP :
<div id="completionConteneur1">{body}</div>
onkeyup="showValue1(this);"J'ai donc créé 2 CSS completionConteneur et completionConteneur1, contenant la même chose.
Et le code JS est le suivant:
Code Javascript :
tableau des reponses necessaires à la correspondance entre la suggestion et les données
*/
suggests = new Array(
'ecole1',
'ecole2',
'ecole3'
);
/*
fonction de recalcul de l'offset top et left qui se refere à l'offsetParent pour palier au probleme de positionnement dans les tableaux
*/
function positionAbsolute(obj,mode)
{
currentValue = 0;
if (obj.offsetParent)
{
if (mode == 'top')
currentValue = obj.offsetTop;
else if (mode == 'left')
currentValue = obj.offsetLeft;
while (obj = obj.offsetParent)
if (mode == 'top')
currentValue += obj.offsetTop;
else if (mode == 'left')
currentValue += obj.offsetLeft;
}
return currentValue;
}
/*
la fonction principale qui remplit le div des differentes suggestions possibles en corélation avec le champ input
*/
function showValue(inside)
{
divDest = document.getElementById('menuRightHidden');
divDest.innerHTML = '';
valueOfElement = '';
exist = 0;
nbOfElement = 0;
divDest.style.top = positionAbsolute(inside,'top') + inside.offsetHeight;
divDest.style.left = positionAbsolute(inside,'left');
divDest.style.width = inside.offsetWidth - 3;
for (i = 0; i < suggests.length; i++)
{
if ((suggests[i].toLowerCase()).indexOf((inside.value).toLowerCase()) != -1 && inside.value != '')
{
nbOfElement++;
exist = 1;
valueOfElement = suggests[i];
currentDiv = document.createElement("div");
currentInner = document.createTextNode(suggests[i]);
currentDiv.indice = suggests[i];
currentDiv.className = 'currentDiv';
currentDiv.onclick = function()
{
inside.value = this.indice;
divDest.style.visibility = 'hidden';
}
currentDiv.appendChild(currentInner);
divDest.appendChild(currentDiv);
}
}
if (exist == 0 || (valueOfElement.length == inside.value.length && nbOfElement == 1))
divDest.style.visibility = 'hidden'
else
divDest.style.visibility = 'visible';
}
function showValue1(inside)
{
divDest = document.getElementById('menuRightHidden');
divDest.innerHTML = '';
valueOfElement = '';
exist = 0;
nbOfElement = 0;
divDest.style.top = positionAbsolute(inside,'top') + inside.offsetHeight;
divDest.style.left = positionAbsolute(inside,'left');
divDest.style.width = inside.offsetWidth - 3;
for (i = 0; i < suggests.length; i++)
{
if ((suggests[i].toLowerCase()).indexOf((inside.value).toLowerCase()) != -1 && inside.value != '')
{
nbOfElement++;
exist = 1;
valueOfElement = suggests[i];
currentDiv = document.createElement("div");
currentInner = document.createTextNode(suggests[i]);
currentDiv.indice = suggests[i];
currentDiv.className = 'currentDiv';
currentDiv.onclick = function()
{
inside.value = this.indice;
divDest.style.visibility = 'hidden';
}
currentDiv.appendChild(currentInner);
divDest.appendChild(currentDiv);
}
}
if (exist == 0 || (valueOfElement.length == inside.value.length && nbOfElement == 1))
divDest.style.visibility = 'hidden'
else
divDest.style.visibility = 'visible';
}
/*initialisation de la div qui contiendra les differentes suggestions
*/
function initMenuRightDiv()
{
var completion = document.getElementById('completionConteneur');
var menuRightDiv = document.createElement("div");
menuRightDiv.className = 'hiddenDiv';
menuRightDiv.id = 'menuRightHidden';
completion.appendChild(menuRightDiv);
}
function initMenuRightDiv1()
{
var completion = document.getElementById('completionConteneur1');
var menuRightDiv = document.createElement("div");
menuRightDiv.className = 'hiddenDiv';
menuRightDiv.id = 'menuRightHidden';
completion.appendChild(menuRightDiv);
}
function initMenu()
{
initMenuDiv( 'completionConteneur' ,'menuRightHidden');
initMenuDiv( 'completionConteneur' ,'menuLeftHidden');
}
window.onload = initMenu;J'ai du rater quelque chose, c'est sur, mais quoi ? Je sèche
