Bonjour à tous
J'ai un souci avec un script que j'ai récupéré.
Le script c'est un formulaire qui génère des suggestions automatiquement. Le script en lui même fonctionne très bien !
Evidemment ce formulaire je l'adapte à un site que je suis entrain de réaliser...
Mon souci: le fichier .JS génère automatiquement la <div> ou son affiché les suggestions, mon problème il est que je voudrais définir cette div a un emplacement bien déterminé et t'il possible ? (bien évidement...) mais comment ? (le JS n'est pas du tout mon fort..)
Pour moi le problème est a la fin du fichier JS je pense qu'il faut déterminer l'endroit ou la <div id="completeDiv"> </div> doit étre placer si non il me la place pas ou je désire sur la page
Merci à tous d'avance
Code HTML :
Code du ficher .JS
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title></title> <link rel="shortcut icon" href="favicon.ico" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <meta http-equiv="content-language" content="fr" /> <link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="autocomplete-1.js"></script><script type="text/javascript"> window.onload = function(){initAutoComplete(document.getElementById('form-test'), document.getElementById('champ-texte'),document.getElementById('bouton-submit'))}; </script> </head> <body> <div id="for_conteneur"> <!-- *************************************** HEADER **************************************** --> <div id="for_header"> </div> <!-- *************************************** HEADER **************************************** --> <!-- *************************************** CONTENU **************************************** --> <div id="for_contenu"> <div id="for_cadre"> <div class="clear"> <form name="form-test" id="form-test" action="javascript:alert('soumission de ' + document.getElementById('champ-texte').value)" style="margin-left: 50px; margin-top:0px"> <input type="text" name="champ-texte" id="champ-texte" size="20" /> <input type="submit" id="bouton-submit"> </form> </div> </div> </div> <!-- *************************************** CONTENU **************************************** --> <!-- ***************************************** PIED ****************************************** --> <div id="for_pied"></div> <!-- ***************************************** PIED ****************************************** --> </div> </body> </html>
Fichier PHP
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
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 // retourne un objet xmlHttpRequest. // méthode compatible entre tous les navigateurs (IE/Firefox/Opera) function getXMLHTTP(){ var xhr=null; if(window.XMLHttpRequest) // Firefox et autres xhr = new XMLHttpRequest(); else if(window.ActiveXObject){ // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e1) { xhr = null; } } } else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); } return xhr; } var _documentForm=null; // le formulaire contenant notre champ texte var _inputField=null; // le champ texte lui-même var _submitButton=null; // le bouton submit de notre formulaire function initAutoComplete(form,field,submit){ _documentForm=form; _inputField=field; _submitButton=submit; _inputField.autocomplete="off"; creeAutocompletionListe(); _currentInputFieldValue=_inputField.value; _oldInputFieldValue=_currentInputFieldValue; cacheResults("",new Array()) // Premier déclenchement de la fonction dans 200 millisecondes setTimeout("mainLoop()",200) } var _oldInputFieldValue=""; // valeur précédente du champ texte var _currentInputFieldValue=""; // valeur actuelle du champ texte var _resultCache=new Object(); // mécanisme de cache des requetes // tourne en permanence pour suggerer suite à un changement du champ texte function mainLoop(){ _currentInputFieldValue = _inputField.value; if(_oldInputFieldValue!=_currentInputFieldValue){ var valeur=escapeURI(_currentInputFieldValue); var suggestions=_resultCache[_currentInputFieldValue]; if(suggestions){ // la réponse était encore dans le cache metsEnPlace(valeur,suggestions) }else{ callSuggestions(valeur) // appel distant } _inputField.focus() } _oldInputFieldValue=_currentInputFieldValue; setTimeout("mainLoop()",200); // la fonction se redéclenchera dans 200 ms return true } // echappe les caractère spéciaux function escapeURI(La){ if(encodeURIComponent) { return encodeURIComponent(La); } if(escape) { return escape(La) } } var _xmlHttp = null; //l'objet xmlHttpRequest utilisé pour contacter le serveur var _adresseRecherche = "options.php" //l'adresse à interroger pour trouver les suggestions function callSuggestions(valeur){ if(_xmlHttp&&_xmlHttp.readyState!=0){ _xmlHttp.abort() } _xmlHttp=getXMLHTTP(); if(_xmlHttp){ //appel à l'url distante _xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true); _xmlHttp.onreadystatechange=function() { if(_xmlHttp.readyState==4&&_xmlHttp.responseXML) { var liste = traiteXmlSuggestions(_xmlHttp.responseXML) cacheResults(valeur,liste) metsEnPlace(valeur,liste) } }; // envoi de la requete _xmlHttp.send(null) } } // Mecanisme de caching des réponses function cacheResults(debut,suggestions){ _resultCache[debut]=suggestions } // Transformation XML en tableau function traiteXmlSuggestions(xmlDoc) { var options = xmlDoc.getElementsByTagName('option'); var optionsListe = new Array(); for (var i=0; i < options.length; ++i) { optionsListe.push(options[i].firstChild.data); } return optionsListe; } var _completeListe=null; // la liste contenant les suggestions // création d'une div pour les suggestions // méthode appellée à l'initialisation function creeAutocompletionListe(){ _completeListe=document.createElement("UL"); _completeListe.id="completeDiv"; document.body.appendChild(_completeListe); } function metsEnPlace(valeur, liste) { while(_completeListe.childNodes.length>0) { _completeListe.removeChild(_completeListe.childNodes[0]); } for (var i=0; i < liste.length; ++i) { var nouveauElmt = document.createElement("LI") nouveauElmt.innerHTML = liste[i] _completeListe.appendChild(nouveauElmt) } }
Afin de mieux faire comprendre met attente voici une capture d'écran qui montre le problème sur l'image on s’aperçoit que le résultat s'affiche bien, mais au milieu de la page et non dans le cadre sous le formulaire.
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 <?php header('Content-Type: text/xml;charset=utf-8'); echo(utf8_encode("<?xml version='1.0' encoding='UTF-8' ?><options>")); if (isset($_GET['debut'])) { $debut = utf8_decode($_GET['debut']); } else { $debut = ""; } $debut = strtolower($debut); $liste = array("abeille","abricot","acheter","acheteur","adjectif","adroit","adroitement","agent","aigle","aile","air","amour","âne","approcher","ardoise","arête","arracher","asperge","astre","aujourd'hui","au lieu de","aussi","autobus","autocar","autruche","avant","avertir","aviation","avril","bain","bal","balcon","balle","ballon","banc","bande","banque","barque","bas","basse","bassin","bataille","bâton","bavarder","baver","bavette","bazar","beau","belle","bec","bêler","bête","bidon","bien","bille","billet","biscuit","bise","blanc","blancheur","blanchir","bleu","bord","bordure","borne","botte","bottine","boucher","bouchon","boucle","boue","boulanger","boulangerie","bouquet","bouteille","boutique","bras","brioche","briquet","brise","briser","brochet","brosse","brosser","brouette","bureau","cachette","cadre","campagne","canal","canard","capitaine","carnaval","carnet","case","castor","chacun","chameau","chant","chapeau","chapelle","chaque","chaton","chaud","chaudement","chef","chenille","chevalier","cheville","chocolat","chose","choucroute","cidre","ciel","cinq","cirque","clocher","clochette","clou","combien","comment","compagne","compagnie","compagnon","compliment","conduire","conduite","confortable","conjuguer","contenir","continuer","coq","coquin","corbeau","corbeille","corde","corne","cornet","corniche","coton","cou","couchette","coudre","coupant","cour","courir","course","couverture","couvrir","craie","crâne","crier","croire","croix","cuire","cuisine","cuisson","cuit","cuivre","cuve","date","décembre","découverte","demi","démonter","dent","depuis","dernier","derrière","dessin","dessiner","dessous","devant","dire","direct","directement","diriger","disque","diviser","division","dix","docteur","domestique","donner","dos","double","douloureux","doux","douce","douze","dragon","dur","durée","durer","eau","écaille","échapper","écharpe","échelle","écolier","écouter","écrevisse","écrire","écriteau","écurie","élémentaire","éleveur","en bas","encore","encrier","encre","endormir","enfantin","enfermer","enfin","en haut","ensuite","entier","entrée","épicerie","épine","épingle","éplucher","escalier","escargot","estrade","étrange","fabrique","fabriquer","fatigue","féminin","fenêtre","fer","fermer","feuille","feutre","fidèle","film","fils","fin","fleuriste","foin","folie","fondre","fontaine","force","forme","formidable","fort","fortement","fourche","franc","franche","frère","frileux","fruit","fuite","fumer","gamin","garage","garde","garde","garder","gardien","garnir","gauche","genre","gerbe","gibier","gilet","girafe","gomme","grammaire","grandeur","grandir","gras","grasse","grave","grenouille","gris","grossir","groupe","haut","hauteur","herbe","heure","hibou","hier","histoire","hiver","ici","idée","injuste","insecte","inspecteur","instrument","invisible","jambe","janvier","jaune","jeune","joie","joue","jouet","joueur","juillet","juin","jument","jusqu'à","labourer","lac","langue","larme","lavage","laver","lécher","leçon","léger","légume","lettre","lèvre","lièvre","linge","liquide","litre","livret","loin","long","longue","lorsque","loup","lueur","lunettes","lutte","machine","mademoiselle","magasin","mai","maintenant","maisonnette","maître","maîtresse","majuscule","malin","mari","masculin","matière","matinal","mauve","mélange","mélanger","mémoire","ménagerie","menteur","menu","mer","merci","mercredi","merle","merveille","messe","métier","mie","miel","le mien","miette","mine","minuit","miracle","moderne","moineau","mois","moment","monstre","montagne","montre","montrer","morue","moteur","motif","moucheron","mouchoir","moudre","mouette","moutarde","mouvement","muraille","murmure","murmurer","nappe","né","neuf","nez","nid","noël","noir","nom","nombre","nouer","nuageux","nuit","nul","odeur","oie","oncle","ongle","or","orage","orageux","oreille","ours","ourson","ouvert","ouvrage","ouvrier","paille","pain","paire","panier","pantalon","papier","papillon","parcourir","pardon","parent","parfait","parole","partage","partager","partie","partir","partout","parvenir","passé","passer","pastille","pâte","patron","patte","pays","peau","pêche","pêcher","pêcheur","peine","pendant","pendre","pépin","perche","perdant","perdre","perte","peureux","pie","pièce","pied","piège","pierre","piéton","pioche","piocher","piquet","place","plage","plaine","plaisir","planter","plaque","plat","pleurer","plonger","pluie","pluriel","pochette","point","pointe","poirier","poitrine","pompe","pomper","pondre","porter","pot","pouce","poudre","pourquoi","pourtant","prairie","pratique","presque","prince","princesse","problème","produire","produit","promenade","promeneur","propre","proprement","provenir","puis","puisque","punir","pur","purée","quatre","quoi","racine","radis","rage","raie","raisin","rame","ramener","raquette","rare","rarement","rebord","recopier","recoudre","recouper","reculer","redevenir","réduire","regard","régime","renard","rencontre","rencontrer","repartir","repasser","répondre","réponse","reprendre","reproduire","requin","respiration","respirer","réunion","richesse","ride","risque","rivage","rivière","robinet","robot","rocher","rond","rondelle","rosée","roue","rude","ruelle","rugir","salle","saluer","s'amuser","sans","sardine","sauvage","sauver","savoir","secouer","se fatiguer","sel","semelle","se moquer","se munir","s'envoler","se rendormir","se souvenir","seul","siège","signe","singulier","soie","soirée","soldat","solidement","sombre","somme","sonner","sonnerie","sorcière","sorte","sot","sotte","sottise","souper","soupière","sous","souvent","spectateur","sport","sportif","sucrier","sueur","suivant","sujet","superbe","surprise","surtout","tableau","tablier","tabouret","tache","taupe","taille","tante","tapage","taper","taureau","tenir","tenue","tigre","timbre","tirer","tissage","tisser","titre","toile","tondre","tordre","train","traire","tranche","traverser","trèfle","trésor","tresse","tricher","tricheur","tristement","trompe","trou","truite","unité","usage","usé","utile","utilité","vague","valeur","valoir","vanille","vapeur","vendeur","vendre","vent","vente","ventre","verger","vernir","vert","verte","veste","viande","victoire","vide","vider","vieux","vif","vive","villa","vinaigre","violette","vipère","virgule","visible","vitesse","vitre","vitrine","vivement","vivre","vocabulaire","voile","voile","voisin","voisinage","vouloir","voyage","voyageur","zèbre","zéro"); function generateOptions($debut,$liste) { $MAX_RETURN = 10; $i = 0; foreach ($liste as $element) { if ($i<$MAX_RETURN && substr($element, 0, strlen($debut))==$debut) { echo(utf8_encode("<option>".$element."</option>")); $i++; } } } generateOptions($debut,$liste); echo("</options>"); ?>
Moi je veux qu'il soit sous le formulaire de recherche, il agrandira automatiquement la zone
Partager