vendredi 8 juillet 2011 à 16:14:21 |
création d'une div pour les suggestions
loulou27
|
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 !
évidement 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 :
<!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>
Code Javascript :
// 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)
}
}Code PHP :
<?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>");
?>
loulou27
|
|