IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[AJAX] Une Autocomplétion multi-forms/champs


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 3
    Points : 2
    Points
    2
    Par défaut [AJAX] Une Autocomplétion multi-forms/champs
    Bonsoir,

    J'ai lu le tutorial 'Ajax - Une autocomplétion pas à pas' de Denis Cabasson
    http://dcabasson.developpez.com/arti...ion-pas-a-pas/

    Cela marche à merveille pour un champs texte.

    Cependant, je souhaite réaliser une page composée de plusieurs formulaires
    ayant chacun un champs texte. Chaque champs texte devant utiliser la même
    liste de mots avec autocomplétion.

    Mon souhait est assez abstrait, pour que vous compreniez mieux, je vais vous
    soumettre un exemple simple :

    J'ai une base de données contenant des noms.

    Je veux une page proposant à l'utilisateur la saisie de plusieurs champs
    textes 'Nom', chaque champs texte étant dans un form différent.

    Et chaque champs texte devant faire appel à la même liste d'autocomplétion
    contenant les noms déjà entrés dans la base de données.

    Dans le tutorial, on initialise l'autocomplétion pour 1 seul champs et 1 seul
    form : Comment faire pour que ca soit utilisé pour tous les différents
    champs des différents forms de la page ?

    Faut il modifier toutes les variables en tableau, et passer en paramètre,
    de chaque fonction les utilisant, un id du champs et du form concerné ?

    Ou y a t-il une solution moins laborieuse ?


    Enfin, j'aimerai savoir si le fait d'avoir + d'une centaine de champs utilisant
    cette liste d'autocomplétion sur la même page est envisageable ?


    Désolé de vous poser tant de questions ^^ Je remercie d'avance ceux
    qui prendrons le temps de me donner quelques réponses

  2. #2
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    j'imagine que ton tutoriel marche avec un div qui apparaît sous le champ avec les noms proposés;
    la seule différence avec plusieurs champs, c'est qu'il faut à chaque fois replacer ce div en position relative, sous le bon champ, ou encore, mettre un div sous chaque champ;

    sinon, je ne vois pas ce qui peut changer

  3. #3
    Candidat au Club
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 3
    Points : 2
    Points
    2
    Par défaut
    Merci pour ta réponse

    Si j'ai bien compris, la solution serait d'appeler la méthode d'initialisation
    du div à chaque fois que l'on change de champs : On réinitialiserait ainsi
    le div d'autocomplétion avec le nom du champs qui a le focus, ainsi que
    le nom du formulaire actif ?

    Ca n'alourdirait pas trop l'appli de devoir tout reconstruire à chaque fois ?
    (sachant qu'il y a un nombre dynamique de champs allant jusqu'à 600 / page
    et qu'il y aurait une liste probable de 2500 noms ^^)

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    Juillet 2005
    Messages
    103
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2005
    Messages : 103
    Points : 98
    Points
    98
    Par défaut
    Moi je ne peut pas vraiment te donner un reponsse complete parceque j'ai pas envie de lire tout un tuto pour le fair.
    Par contre je peux te dir qu'en javascript tout les tableaux sont des references; si tu fait t1 = t2; et que tu modifie une valeur dans t2, t1 == t2 reste vrais; donc tu peu avoir 3000000000 mots dans ton tableau, si tu fait en sorte de ne pas les retelecharger et que tu ne t'amuse null part à tout les copier un à un, c'est du pareil au meme.

  5. #5
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    aucun souci dans ton cas; la liste de propositions est générée ou régénérée à chaque touche pressée, c'est sûr, mais qu'il y ait un ou mille champs ne change rien, c'est le système lui-même qui fonctionne de cette manière; à toi d'indiquer en paramètre la zone de texte courante pour placer les propositions au bon endroit;

  6. #6
    Candidat au Club
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 3
    Points : 2
    Points
    2
    Par défaut
    Merci encore

    Je vais essayer de l'adapter et je vous tiens au courant.

  7. #7
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2006
    Messages
    75
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Janvier 2006
    Messages : 75
    Points : 59
    Points
    59
    Par défaut
    Citation Envoyé par Arcaal
    Merci encore

    Je vais essayer de l'adapter et je vous tiens au courant.
    Bonjour,

    As tu réussit à modifier la source pour obtenir ce que tu souhaites ?
    J'aimerais aussi faire un peu la même chose, mais je n'y arrives pas.

    Je voudrais mettre plusieurs champs autocomplétés dans une même page, mais par contre, dans le même formulaire et non dans des formulaires différents afin de pouvoir valider les valeurs de tous les champs avec un seul bouton.

    Si tu as des info...

  8. #8
    Nouveau Candidat au Club
    Inscrit en
    Avril 2008
    Messages
    1
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 1
    Points : 1
    Points
    1
    Par défaut g une solution la voici
    <?
    include("header.php");
    include("webfsesante.lib.php");
    $acces=$_SESSION['acces'];
    //rajout de dreannrec pour differencier d'avec annulation /rectification de DRE
    $dreannrec=0;
    session_register('dreannrec');
    if($acces=="sephira")
    {
    $class="titre";
    $bgcolor="";
    }
    else
    {
    $class="rech";
    $bgcolor="#0068B3";
    }
    if($stylefacture=="")
    {
    $stylefacture="FSE";
    }


    ?>
    <!--rajout BN le 06/03/2008 pour autocompletion ajax-->
    <SCRIPT type="text/javascript" src="autocomplete-3-2.js"></SCRIPT>
    <!--<SCRIPT type="text/javascript" src="autocomplete-3-3.js"></SCRIPT>
    //initAutoComplete(document.getElementById('form-test'),
    //document.getElementById('champ-texte'),document.getElementById('bouton-submit'));
    -->
    <SCRIPT type="text/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
    var _adresseRecherche=null;

    function initAutoComplete(form,field,submit)
    {
    _documentForm=form;
    if(field.name=='nomorgacomp')
    {
    _adresseRecherche = "options2.php" //l'adresse א interroger pour trouver les suggestions
    }
    else
    {
    _adresseRecherche = "options.php" //l'adresse א interroger pour trouver les suggestions
    }
    _inputField=field;
    _submitButton=submit;
    _inputField.autocomplete="off";
    creeAutocompletionDiv();
    _currentInputFieldValue=_inputField.value;
    _oldInputFieldValue=_currentInputFieldValue;
    cacheResults("",new Array())
    document.onkeydown=onKeyDownHandler;
    _inputField.onkeyup=onKeyUpHandler;
    _inputField.onblur=onBlurHandler;
    window.onresize=onResizeHandler;
    // 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(){
    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 = "options2.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;
    }

    //insטre une rטgle avec son nom
    function insereCSS(nom,regle){
    if (document.styleSheets) {
    var I=document.styleSheets[0];
    if(I.addRule){ // mיthode IE
    I.addRule(nom,regle)
    }else if(I.insertRule){ // mיthode DOM
    I.insertRule(nom+" { "+regle+" }",I.cssRules.length)
    }
    }
    }

    function initStyle(){
    var AutoCompleteDivListeStyle="font-size: 13px; font-family: arial,sans-serif; word-wrap:break-word; ";
    var AutoCompleteDivStyle="display: block; padding-left: 3; padding-right: 3; height: 16px; overflow: hidden; background-color: white;";
    var AutoCompleteDivActStyle="background-color: #3366cc; color: white ! important; ";
    insereCSS(".AutoCompleteDivListeStyle",AutoCompleteDivListeStyle);
    insereCSS(".AutoCompleteDiv",AutoCompleteDivStyle);
    insereCSS(".AutoCompleteDivAct",AutoCompleteDivActStyle);
    }

    function setStylePourElement(c,name){
    c.className=name;
    }

    // calcule le dיcalage א gauche
    function calculateOffsetLeft(r){
    return calculateOffset(r,"offsetLeft")
    }

    // calcule le dיcalage vertical
    function calculateOffsetTop(r){
    return calculateOffset(r,"offsetTop")
    }

    function calculateOffset(r,attr){
    var kb=0;
    while(r){
    kb+=r[attr];
    r=r.offsetParent
    }
    return kb
    }

    // calcule la largeur du champ
    function calculateWidth(){
    return _inputField.offsetWidth-2*1
    }

    function setCompleteDivSize(){
    if(_completeDiv){
    _completeDiv.style.left=calculateOffsetLeft(_inputField)+"px";
    _completeDiv.style.top=calculateOffsetTop(_inputField)+_inputField.offsetHeight-1+"px";
    _completeDiv.style.width=calculateWidth()+"px"
    }
    }

    function creeAutocompletionDiv() {
    initStyle();
    _completeDiv=document.createElement("DIV");
    _completeDiv.id="completeDiv";
    var borderLeftRight=1;
    var borderTopBottom=1;
    _completeDiv.style.borderRight="black "+borderLeftRight+"px solid";
    _completeDiv.style.borderLeft="black "+borderLeftRight+"px solid";
    _completeDiv.style.borderTop="black "+borderTopBottom+"px solid";
    _completeDiv.style.borderBottom="black "+borderTopBottom+"px solid";
    _completeDiv.style.zIndex="1";
    _completeDiv.style.paddingRight="0";
    _completeDiv.style.paddingLeft="0";
    _completeDiv.style.paddingTop="0";
    _completeDiv.style.paddingBottom="0";
    setCompleteDivSize();
    _completeDiv.style.visibility="hidden";
    _completeDiv.style.position="absolute";
    _completeDiv.style.backgroundColor="white";
    document.body.appendChild(_completeDiv);
    setStylePourElement(_completeDiv,"AutoCompleteDivListeStyle");
    }

    function metsEnPlace(valeur, liste){
    while(_completeDiv.childNodes.length>0) {
    _completeDiv.removeChild(_completeDiv.childNodes[0]);
    }
    // mise en place des suggestions
    for(var f=0; f<liste.length; ++f){
    var nouveauDiv=document.createElement("DIV");
    nouveauDiv.onmousedown=divOnMouseDown;
    nouveauDiv.onmouseover=divOnMouseOver;
    nouveauDiv.onmouseout=divOnMouseOut;
    setStylePourElement(nouveauDiv,"AutoCompleteDiv");
    var nouveauSpan=document.createElement("SPAN");
    nouveauSpan.innerHTML=liste[f]; // le texte de la suggestion
    nouveauDiv.appendChild(nouveauSpan);
    _completeDiv.appendChild(nouveauDiv)
    }
    PressAction();
    if(_completeDivRows>0) {
    _completeDiv.height=50*_completeDivRows+4;
    } else {
    hideCompleteDiv();
    }

    }

    var _lastKeyCode=null;

    // Handler pour le keydown du document
    var onKeyDownHandler=function(event){
    // accטs evenement compatible IE/Firefox
    if(!event&&window.event) {
    event=window.event;
    }
    // on enregistre la touche ayant dיclenchי l'evenement
    if(event) {
    _lastKeyCode=event.keyCode;
    }
    }

    var _eventKeycode = null;

    // Handler pour le keyup de lu champ texte
    var onKeyUpHandler=function(event){
    // accטs evenement compatible IE/Firefox
    if(!event&&window.event) {
    event=window.event;
    }
    _eventKeycode=event.keyCode;
    // Dans les cas touches touche haute(38) ou touche basse (40)
    if(_eventKeycode==40||_eventKeycode==38) {
    // on autorise le blur du champ (traitement dans onblur)
    blurThenGetFocus();
    }
    // taille de la selection
    var N=rangeSize(_inputField);
    // taille du texte avant la selection (selection = suggestion d'autocomplיtion)
    var v=beforeRangeSize(_inputField);
    // contenu du champ texte
    var V=_inputField.value;
    if(_eventKeycode!=0){
    if(N>0&&v!=-1) {
    // on recupere uniquement le champ texte tapי par l'utilisateur
    V=V.substring(0,v);
    }
    // 13 = touche entrיe
    if(_eventKeycode==13||_eventKeycode==3){
    var d=_inputField;
    // on mets en place l'ensemble du champ texte en repoussant la selection
    if(_inputField.createTextRange){
    var t=_inputField.createTextRange();
    t.moveStart("character",_inputField.value.length);
    _inputField.select()
    } else if (d.setSelectionRange){
    _inputField.setSelectionRange(_inputField.value.length,_inputField.value.length)
    }
    } else {
    // si on a pas pu agrandir le champ non selectionnי, on le mets en place violemment.
    if(_inputField.value!=V) {
    _inputField.value=V
    }
    }
    }
    // si la touche n'est ni haut, ni bas, on stocke la valeur utilisateur du champ
    if(_eventKeycode!=40&&_eventKeycode!=38) {
    // le champ courant n est pas change si key Up ou key Down
    _currentInputFieldValue=V;
    }
    if(handleCursorUpDownEnter(_eventKeycode)&&_eventKeycode!=0) {
    // si on a prיssי une touche autre que haut/bas/enter
    PressAction();
    }
    }

    // Change la suggestion selectionnי.
    // cette mיthode traite les touches haut, bas et enter
    function handleCursorUpDownEnter(eventCode){
    if(eventCode==40){
    highlightNewValue(_highlightedSuggestionIndex+1);
    return false
    }else if(eventCode==38){
    highlightNewValue(_highlightedSuggestionIndex-1);
    return false
    }else if(eventCode==13||eventCode==3){
    return false
    }
    return true
    }

    var _completeDivRows = 0;
    var _completeDivDivList = null;
    var _highlightedSuggestionIndex = -1;
    var _highlightedSuggestionDiv = null;

    // gטre une touche pressיe autre que haut/bas/enter
    function PressAction(){
    _highlightedSuggestionIndex=-1;
    var suggestionList=_completeDiv.getElementsByTagName("div");
    var suggestionLongueur=suggestionList.length;
    // on stocke les valeurs prיcיdentes
    // nombre de possibilitיs de complיtion
    _completeDivRows=suggestionLongueur;
    // possiblitיs de complיtion
    _completeDivDivList=suggestionList;
    // si le champ est vide, on cache les propositions de complיtion
    if(_currentInputFieldValue==""||suggestionLongueur==0){
    hideCompleteDiv()
    }else{
    showCompleteDiv()
    }
    var trouve=false;
    // si on a du texte sur lequel travailler
    if(_currentInputFieldValue.length>0){
    var indice;
    // T vaut true si on a dans la liste de suggestions un mot commencant comme l'entrיe utilisateur
    for(indice=0; indice<suggestionLongueur; indice++){
    if(getSuggestion(suggestionList.item(indice)).toUpperCase().indexOf(_currentInputFieldValue.toUpperCase())==0) {
    trouve=true;
    break
    }
    }
    }
    // on dיsיlectionne toutes les suggestions
    for(var i=0; i<suggestionLongueur; i++) {
    setStylePourElement(suggestionList.item(i),"AutoCompleteDiv");
    }
    // si l'entrיe utilisateur (n) est le dיbut d'une suggestion (n-1) on sיlectionne cette suggestion avant de continuer
    if(trouve){
    _highlightedSuggestionIndex=indice;
    _highlightedSuggestionDiv=suggestionList.item(_highlightedSuggestionIndex);
    }else{
    _highlightedSuggestionIndex=-1;
    _highlightedSuggestionDiv=null
    }
    var supprSelection=false;
    switch(_eventKeycode){
    // cursor left, cursor right, page up, page down, others??
    case 8:
    case 33:
    case 34:
    case 35:
    case 35:
    case 36:
    case 37:
    case 39:
    case 45:
    case 46:
    // on supprime la suggestion du texte utilisateur
    supprSelection=true;
    break;
    default:
    break
    }
    // si on a une suggestion (n-1) sיlectionnיe
    if(!supprSelection&&_highlightedSuggestionDiv){
    setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDivAct");
    var z;
    if(trouve) {
    z=getSuggestion(_highlightedSuggestionDiv).substr(0);
    } else {
    z=_currentInputFieldValue;
    }
    if(z!=_inputField.value){
    if(_inputField.value!=_currentInputFieldValue) {
    return;
    }
    // si on peut crיer des range dans le document
    if(_inputField.createTextRange||_inputField.setSelectionRange) {
    _inputField.value=z;
    }
    // on sיlectionne la fin de la suggestion
    if(_inputField.createTextRange){
    var t=_inputField.createTextRange();
    t.moveStart("character",_currentInputFieldValue.length);
    t.select()
    }else if(_inputField.setSelectionRange){
    _inputField.setSelectionRange(_currentInputFieldValue.length,_inputField.value.length)
    }
    }
    }else{
    // sinon, plus aucune suggestion de sיlectionnיe
    _highlightedSuggestionIndex=-1;
    }
    }

    var _cursorUpDownPressed = null;

    // permet le blur du champ texte aprטs que la touche haut/bas ai יtי pressי.
    // le focus est rיcupיrי aprטs traitement (via le timeout).
    function blurThenGetFocus(){
    _cursorUpDownPressed=true;
    _inputField.blur();
    setTimeout("_inputField.focus();",10);
    return
    }

    // taille de la selection dans le champ input
    function rangeSize(n){
    var N=-1;
    if(n.createTextRange){
    var fa=document.selection.createRange().duplicate();
    N=fa.text.length
    }else if(n.setSelectionRange){
    N=n.selectionEnd-n.selectionStart
    }
    return N
    }

    // taille du champ input non selectionne
    function beforeRangeSize(n){
    var v=0;
    if(n.createTextRange){
    var fa=document.selection.createRange().duplicate();
    fa.moveEnd("textedit",1);
    v=n.value.length-fa.text.length
    }else if(n.setSelectionRange){
    v=n.selectionStart
    }else{
    v=-1
    }
    return v
    }

    // Place le curseur א la fin du champ
    function cursorAfterValue(n){
    if(n.createTextRange){
    var t=n.createTextRange();
    t.moveStart("character",n.value.length);
    t.select()
    } else if(n.setSelectionRange) {
    n.setSelectionRange(n.value.length,n.value.length)
    }
    }


    // Retourne la valeur de la possibilite (texte) contenu dans une div de possibilite
    function getSuggestion(uneDiv){
    if(!uneDiv) {
    return null;
    }
    return trimCR(uneDiv.getElementsByTagName('span')[0].firstChild.data)
    }

    // supprime les caractטres retour chariot et line feed d'une chaine de caractטres
    function trimCR(chaine){
    for(var f=0,nChaine="",zb="\n\r"; f<chaine.length; f++) {
    if (zb.indexOf(chaine.charAt(f))==-1) {
    nChaine+=chaine.charAt(f);
    }
    }
    return nChaine
    }

    // Cache completement les choix de completion
    function hideCompleteDiv(){
    _completeDiv.style.visibility="hidden"
    }

    // Rends les choix de completion visibles
    function showCompleteDiv(){
    _completeDiv.style.visibility="visible";
    setCompleteDivSize()
    }

    // Change la suggestion en surbrillance
    function highlightNewValue(C){
    if(!_completeDivDivList||_completeDivRows<=0) {
    return;
    }
    showCompleteDiv();
    if(C>=_completeDivRows){
    C=_completeDivRows-1
    }
    if(_highlightedSuggestionIndex!=-1&&C!=_highlightedSuggestionIndex){
    setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDiv");
    _highlightedSuggestionIndex=-1
    }
    if(C<0){
    _highlightedSuggestionIndex=-1;
    _inputField.focus();
    return
    }
    _highlightedSuggestionIndex=C;
    _highlightedSuggestionDiv=_completeDivDivList.item(C);
    setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDivAct");
    _inputField.value=getSuggestion(_highlightedSuggestionDiv);
    }

    // Handler de resize de la fenetre
    var onResizeHandler=function(event){
    // recalcule la taille des suggestions
    setCompleteDivSize();
    }

    // Handler de blur sur le champ texte
    var onBlurHandler=function(event){
    if(!_cursorUpDownPressed){
    // si le blur n'est pas causי par la touche haut/bas
    hideCompleteDiv();
    // Si la derniטre touche prיssי est tab, on passe au bouton de validation
    if(_lastKeyCode==9){
    //_submitButton.focus();
    _lastKeyCode=-1
    }
    }
    _cursorUpDownPressed=false
    };

    // declenchee quand on clique sur une div contenant une possibilite
    var divOnMouseDown=function(){
    _inputField.value=getSuggestion(this);
    //_documentForm.submit()
    };

    // declenchee quand on passe sur une div de possibilite. La div prיcיdente est passee en style normal
    var divOnMouseOver=function(){
    if(_highlightedSuggestionDiv) {
    setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDiv");
    }
    setStylePourElement(this,"AutoCompleteDivAct")
    };

    // declenchee quand la sourie quitte une div de possiblite. La div repasse a l'etat normal
    var divOnMouseOut = function(){
    setStylePourElement(this,"AutoCompleteDiv");
    };
    </SCRIPT>
    <!--<SCRIPT type="text/javascript">
    window.onload = function()
    {
    initAutoComplete(document.getElementById('form-test'),
    document.getElementById('champ-texte'),document.getElementById('champ-id'),document.getElementById('bouton-submit'));
    };
    </SCRIPT>-->
    <BODY class=vert>
    <!--<FORM name="test" method="GET" target="bas" action="module.php">modif BN le 06/03/2008 pour autocompletion ajax-->
    <FORM name="test" id="form-test" method="GET" target="bas" action="module.php">
    <INPUT type="hidden" name=rech value=2>
    <INPUT type="hidden" name=module value=tabfse>
    <INPUT type="hidden" name=id value=webfse>
    <DIV align="left">
    <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0">
    <?echo"<td class='".$class."'>";?>
    <INPUT type="radio" name="stylefacture" value="FSE" <?if($stylefacture=="FSE"){echo "checked";}?>>FSE
    </TD>
    <?echo"<td class='".$class."'>";?>
    <INPUT type="radio" name="stylefacture" value="DRE" <?if($stylefacture=="DRE") {echo "checked";}?>>DRE&nbsp;&nbsp;&nbsp;Seules les factures des 3 derniers mois sont disponibles en ligne.
    </TD>
    </TABLE>
    </DIV>
    <DIV align="left">
    <?echo"<table border=\"0\" width=\"100%\" height=\"130\" cellspacing=\"0\" cellpadding=\"0\" bgcolor=\"".$bgcolor."\">";?>
    <TR>
    <TD width="100%" height="100" valign="top">
    <DIV align="left">
    <TABLE border="0" cellspacing="0" cellpadding="0" width="480">
    <TR>
    <TD align="left" width="380" valign="middle" rowspan=2>
    <DIV align="left">
    <TABLE border="0" cellspacing="0" cellpadding="0" width="620" height="26">
    <TR>
    <BR>
    <?echo"<td class='".$class."'>&nbsp;N°Facture</td>";?>
    <?echo"<td class='".$class."'>";?>
    <INPUT type="text" name="numfse" size="9" maxlength="9" style="font-size:11; font-family: Arial;" <? if(isset($Conumfse) and $Conumfse!="") echo "value=".$Conumfse ?>>
    &nbsp;&nbsp;&nbsp;N°Secu <INPUT type="text" name="numsecu" size="13" maxlength="15" style="font-family: Arial; font-size: 11;" <? if(isset($Conumsecu) and $Conumsecu!="") echo "value=".$Conumsecu ?>>
    </TD>
    <?
    echo"<TD class='".$class."'>Nom Mut</TD>";
    echo"<TD class='".$class."'>";
    ?>
    <!--modif BN le 06/03/2008 pour autocompletion ajax-->
    <INPUT type="text" name="orgacomp" id="champ-texte" size="20" onfocus="initAutoComplete('form-test',this,'ident');" autocomplete="off" />
    <!--<INPUT type="text" name="orgacomp" id="champ-texte" size="20" autocomplete="off" />-->
    </TD>
    </TR>
    <TR>
    <?echo"<td class='".$class."' width=\"100\">&nbsp;Nom Patient</td>";?>
    <?echo"<td class='".$class."'>";?>
    <INPUT type="text" name="nompat" size="30" style="font-family: Arial; font-size: 11;" <? if(isset($Conompat) and $Conompat!="") echo "value=".$Conompat ?>>
    &nbsp;&nbsp;&nbsp;N°Lot <INPUT type="text" name="numlot" size="3" maxlength="3" style="font-family: Arial; font-size: 11;" <? if(isset($Conumlot) and $Conumlot!="") echo "value=".$Conumlot ?>>
    </TD>
    <?
    echo"<TD class='".$class."'>N°Mut</TD>";
    echo"<TD class='".$class."'>";
    ?>
    <INPUT type="text" name="nomorgacomp" id="champ-id" size="20" onfocus="initAutoComplete('form-test',this,'ident');" autocomplete="off" />
    <!--<INPUT type="text" name="nomorgacomp" id="champ-id" size="20" autocomplete="off" />-->
    </TD>
    </TR>
    <TR>
    <?echo"<TD class='".$class."' width=\"100\">&nbsp;Ann&eacute;e&nbsp;</TD>";?>
    <?echo"<TD class='".$class."'>";?>
    <SELECT name="annee" size="1" style="font-family: Arial; font-size: 11">
    <OPTION value="0"></OPTION>
    <?
    //Affichage des annees dans le combo
    $annee=date("Y");
    $month=date("m");
    $m=1*$month; //pour enlever le "0" en cas de mois inferieur a 10
    if ($month<4)
    echo "<OPTION value=".($annee-1)." >".($annee-1)."</OPTION>\n";
    echo "<OPTION value=".$annee." SELECTED>".$annee."</OPTION>\n";
    $mois_liste=array("","Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre");
    ?>
    </SELECT>
    &nbsp;&nbsp;&nbsp;Mois&nbsp;
    <SELECT name="mois" size="1" style="font-family: Arial; font-size: 11">
    <OPTION value="0"></OPTION>
    <?
    for($j=$m;$j>($m-4);$j--)
    {
    if($j<=0)
    {
    $i=12+$j;
    }
    else
    {
    $i=$j;
    }
    echo "<OPTION value=\"$i\" $select[$i] >$mois_liste[$i]</OPTION>";
    }
    ?>
    </SELECT>
    &nbsp;&nbsp;&nbsp;Jour&nbsp;
    <SELECT name="jour" size="1" style="font-family: Arial; font-size: 11">
    <OPTION value=""></OPTION>
    <?
    for($i=1;$i<32;$i++)
    {
    echo"<OPTION value=\"$i\">$i</OPTION>";
    }
    ?>
    </SELECT>
    </TD>
    </TR>
    <TR>
    <?
    $sel[0]="selected";
    if (isset($Coetatfse)) $sel[$Coetatfse]="selected";
    ?>
    <?
    echo"<TD class='".$class."' width=\"100\">&nbsp;Type Facture</TD>";
    ?>
    <TD>
    <SELECT name="etatfse" size="1" style="font-family: Arial; font-size: 11">
    <OPTION value="0"<? echo $sel[0] ?>>toutes les Factures</OPTION>
    <OPTION value="1"<? echo $sel[1] ?>>les Factures hors TP</OPTION>
    <OPTION value="2"<? echo $sel[2] ?>>les Factures hors TP re&ccedil;ues par les caisses</OPTION>
    <OPTION value="3"<? echo $sel[3] ?>>les Factures hors TP refus&eacute;es par les caisses</OPTION>
    <OPTION value="4"<? echo $sel[4] ?>>les Factures hors TP en cours</OPTION>
    <OPTION value="5"<? echo $sel[5] ?>>les Factures TP</OPTION>
    <OPTION value="6"<? echo $sel[6] ?>>les Factures TP rembours&eacute;es</OPTION>
    <OPTION value="7"<? echo $sel[7] ?>>les Factures TP refuses par les caisses</OPTION>
    <OPTION value="8"<? echo $sel[8] ?>>les Factures TP en cours</OPTION>
    </SELECT>
    </TD>
    <?
    if($acces=="sephira")
    {
    $selmd[0]="selected";
    if (isset($Comodereglement)) $selmd[$Comodereglement]="selected";
    ?>
    <?echo"<TD class='".$class."'>R&egrave;glement</TD>";?>
    <TD>
    <SELECT name="modereglement" size="1" style="font-family: Arial; font-size: 11">
    <OPTION value=""<? echo $selmd[0] ?>>tous types</OPTION>
    <OPTION value="C"<? echo $selmd[1] ?>>ch&egrave;que</OPTION>
    <OPTION value="B"<? echo $selmd[2] ?>>carte bancaire</OPTION>
    <OPTION value="I"<? echo $selmd[3] ?>>inconnu</OPTION>
    <OPTION value="E"<? echo $selmd[4] ?>>esp&egrave;ce</OPTION>
    <OPTION value="D"<? echo $selmd[5] ?>>diff&eacute;r&eacute;</OPTION>
    <OPTION value="N"<? echo $selmd[6] ?>>non saisi</OPTION>
    </SELECT>
    </TD>
    <?
    }
    ?>
    </TR>
    </TABLE>
    </DIV>
    </TD>
    <TD align="left" width="70" valign="middle" colspan=4>
    <!--<INPUT type="image" name="ident" src="<? echo $chemImages; ?>valide1.gif" border="0" alt="Valider la recherche" onMouseOver="return mOver('Valider la recherche')" onMouseOut="mOut()">
    modif BN le 06/03/2008 pour autocompletion ajax-->
    <INPUT type="image" name="ident" id="bouton-submit" src="<? echo $chemImages; ?>valide1.gif" border="0" alt="Valider la recherche" onMouseOver="return mOver('Valider la recherche')" onMouseOut="mOut()">
    </TD>
    </TR>
    </TABLE>
    </DIV>
    </TD>
    </TR>
    </TABLE>
    </DIV>
    </FORM>
    </BODY>
    </HTML>

  9. #9
    Membre à l'essai
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    49
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 49
    Points : 16
    Points
    16
    Par défaut


    explication please???
    merci d'avance

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 15
    Dernier message: 22/12/2008, 22h01
  2. [AJAX] Ajax - une autocomplétion pas à pas
    Par ploxien dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 29/11/2007, 08h23
  3. [AJAX] Lier une liste déroulant à un champ texte
    Par arnaudperfect dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 13/04/2007, 14h50
  4. [AJAX] Autocomplétion d'un champ texte
    Par jarod71 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 20/03/2007, 12h34
  5. Réponses: 7
    Dernier message: 24/01/2006, 11h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo