par
sylvaing26 » 30 mai 2009, 11:33
Bonjour,
j'ai ce code qui me fait un auto suggest d'un champs de saisie.
Je ne sais pas comment definir le style de manière a ce que lorsque je survol un résultat, la couleur change
Merci d'avance
Code : Tout sélectionner
/*
tableau des reponses necessaires à la correspondance entre la suggestion et les données
Vous pouvez bien entendu le generer en php ou bien de facon dynamique avec ajax ;)
*/
/*
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 remplis 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].indexOf(inside.value) == 0 && 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';
}
/*
intialisation de la div qui contiendra les differentes suggestions
*/
function initMenuRightDiv()
{
menuRightDiv = document.createElement("div");
menuRightDiv.className = 'hiddenDiv';
menuRightDiv.id = 'menuRightHidden';
window.document.body.appendChild(menuRightDiv);
}
window.onload = initMenuRightDiv;
Bonjour,
j'ai ce code qui me fait un auto suggest d'un champs de saisie.
Je ne sais pas comment definir le style de manière a ce que lorsque je survol un résultat, la couleur change
Merci d'avance
[code]/*
tableau des reponses necessaires à la correspondance entre la suggestion et les données
Vous pouvez bien entendu le generer en php ou bien de facon dynamique avec ajax ;)
*/
/*
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 remplis 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].indexOf(inside.value) == 0 && 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';
}
/*
intialisation de la div qui contiendra les differentes suggestions
*/
function initMenuRightDiv()
{
menuRightDiv = document.createElement("div");
menuRightDiv.className = 'hiddenDiv';
menuRightDiv.id = 'menuRightHidden';
window.document.body.appendChild(menuRightDiv);
}
window.onload = initMenuRightDiv;[/code]