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 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
| //Récupération de l'option du select id marqueSelect
function suggest_marque(marque_sel){
if(!document.getElementById('marqueSelect')){
var liste, texte;
liste = document.getElementById("marqueSelect");
texte = liste.options[liste.selectedIndex].text;
document.write(texte);
}
}
var value_suggested = ''; //On stock la value du champ de texte pour éviter de refaire le processus si la valeur n'a pas changé (appuyé sur une touche autre que caractère)
function suggest_ref(element, table, field){
//Détection du navigateur
var is_ie = ((navigator.userAgent.toLowerCase().indexOf("msie") != -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1));
/*Fonction utile : détermine la position absolue exacte d'un objet sur la page*/
findPos = function(obj){
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop];
}
//Création de la liste des propositions si elle n'existe pas encore
if(!document.getElementById('suggestsList')){
var suggestsList = document.createElement('ul');
suggestsList.id = 'suggestsList';
/*On donne à la liste la même largeur que le champ de texte => on doit récupérer sa largeur et son padding*/
var style = (!is_ie ? window.getComputedStyle(element, null) : element.currentStyle); //Récupération du style
if(style.width){
var width = parseInt(style.width.replace(/px/, '')); //On transforme la largeur dans le style en int
//On récupère le padding éventuel du champ pour le rajouter à la largeur à attribuer à la liste
var paddingRight = (style.paddingRight ? style.paddingRight : false);
if(paddingRight){
paddingRight = parseInt(paddingRight.replace(/px/, ''));
width += paddingRight;
}
var paddingLeft = (style.paddingLeft ? style.paddingLeft : false);
if(paddingLeft){
paddingLeft = parseInt(paddingLeft.replace(/px/, ''));
width += paddingLeft;
}
width = (isNaN(width) ? 150 : width);
suggestsList.style.width = 500+'px'; //On donne à la liste la même largeur que celle du champ de texte
}
//On positionne la liste sous le champ
suggestsList.style.position = 'absolute';
var coord = findPos(element); //Récupération des coordonnées du champ
suggestsList.style.left = coord[0]+'px';
suggestsList.style.top = coord[1]+(19)+'px'; //On ajoute 19px de haut pour que la liste soit sur le champ et non par-dessus
document.body.appendChild(suggestsList); //On insère la liste dans le document
}
else{
//Si la liste existe déjà, on se contente de la repérer par rapport à son id
suggestsList = document.getElementById('suggestsList');
}
//Si la valeur a changée, on masque la liste, le temps d'actualiser son contenu
if(element.value != value_suggested){
suggestsList.style.display = 'none';
}
//Fonction servant à cacher les suggestions
closeSuggest = function(nofocus){
var todelete = document.createElement('div');
todelete.appendChild(suggestsList);
if(!nofocus){ element.focus(); }
};
//Fonction gérant le parcour des éléments à l'aide des touches directionnelles
selectSuggest = function(direction){
//On regarde si un élément est selectionné
var selected = -1;
var lis = suggestsList.getElementsByTagName('li');
for(i=0; i<lis.length; i++){
if(lis[i].id == 'selectedSuggest'){
selected = i;
}
lis[i].id = '';
}
selected += direction;
selected = (selected < -1 ? (lis.length-1) : selected);
if(selected >= 0 && selected < lis.length){
lis[selected].id = 'selectedSuggest';
}
};
//Remplit le champ avec la suggestion sélectionnée
useSelected = function(){
//On regarde si un élément est selectionné
var lis = suggestsList.getElementsByTagName('li');
for(i=0; i<lis.length; i++){
if(lis[i].id == 'selectedSuggest'){
element.value = lis[i].firstChild.innerHTML;
}
}
closeSuggest();
};
document.body.onkeyup = function(e){
var key = (!is_ie ? e.keyCode : window.event.keyCode);
switch(key){
case 27: //Esc
closeSuggest();
break;
case 9: //Tab
closeSuggest(true); //On referme la liste sans redonner le focus au champ
break;
case 38: //Up
selectSuggest(-1);
break
case 40: //Down
selectSuggest(1);
break;
case 13: //Enter
useSelected();
break;
}
};
document.body.onclick = function(){ closeSuggest(true); };
if(element.value != '' && element.value != value_suggested){
/*Récupération de la liste des suggestions*/
var suggests = new Array();
var xhr_generique = false;
try { xhr_generique = new ActiveXObject("Microsoft.XMLHTTP"); }
catch(e){ xhr_generique = new XMLHttpRequest(); }
//Requête AJAX : attention à bien donner le chemin du fichier autocomplete_ajax.php
//timestamp en parametre pour empecher la mise en cache
xhr_generique.open("GET", '../includes/autocomplete_ajax_par_ref_oem.php?table='+table+'&field='+field+'&search='+element.value+'&nocache='+Math.floor((new Date()).getTime()), true);
// Attente de l'état 4 (-> OK)
xhr_generique.onreadystatechange = function () {
// l'état est à 4, requête reçue
if(xhr_generique.readyState == 4){
var xml = xhr_generique.responseXML; //Récupération du xml contenant les suggestions
var suggests_xml = xml.getElementsByTagName('suggest');
for(i=0; i<suggests_xml.length; i++){
//On remplit l'array des suggestions
suggests[suggests.length] = suggests_xml[i].firstChild.data;
}
//On supprime l'ancien contenu de la liste des suggestions, puis on la remplit
suggestsList.innerHTML = '';
if(suggests.length){
for(i=0; i<suggests.length; i++){
var li = document.createElement('li');
var a = document.createElement('a');
a.innerHTML = suggests[i];
//On ajoute un évènement sur le lien pour que son contenu soit mis dans le champ lorsque l'on clique dessus
a.onclick = function(){
element.value = this.innerHTML;
closeSuggest();
};
li.appendChild(a);
suggestsList.appendChild(li);
}
//Maintenant que la liste est remplie, on l'affiche
suggestsList.style.display = '';
}
else{
//S'il n'y a aucune suggestion correspondante, on cache la liste
closeSuggest();
}
}
}
xhr_generique.send(null);
}
else if(element.value == ''){
//Si le champ est vide, on cache la liste
closeSuggest();
}
//On enregistre la value pour laquelle le traitement a été effectuer pour ne pas le refaire s'il n'y a pas de changement
value_suggested = element.value;
} |
Partager