11548 sujets

JavaScript, DOM et API Web HTML5

Autosuggestion et liste de sélection

Bonjour,

J'ai un moteur de recherche avec de l'autosuggestion en javascript.

J'ai à côté du formulaire de recherche une liste ou l'on peut sélectionner le type de recherche: par mots clés ou par titre.

J'ai deux pages (options.php et options2.php) qui contiennent, l'un les mots clés et l'autres les titres, renvoyés sous forme de liste xml.

J'ai essayé de créer une condition pour que en fonction ce que l'on sélectionne dans la liste, il aille chercher les mots pour l'autosuggestion soit dans options.php ,soit dans options2.php.

Merci d'avance ! Smiley cligne


Voici le javascript ou il faut récuperer le select et créer les conditions pour sélectionner la bonne page :


function initAutoComplete(form,field,submit){
  _documentForm=form;
  _inputField=field;
  _inputSelect=form.elements['select-par'].selectedIndex;
  _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 select1 =_inputSelect.value;


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

if (select1 == 'motcle')
{
var _adresseRecherche = "options.php"; //l'adresse à interroger pour trouver les suggestions
}
if (select1 == 'titre' )
{
var _adresseRecherche = "options2.php";
}

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)
  }
}


Et voici le code html contenant le <select> : 


<!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>test d'autocompletion</title>
        <link rel="stylesheet" type="text/css" href="autocompletion.css" />

<script type="text/javascript" src="autocomplete-3-2.js"></script>
<script type="text/javascript">
window.onload = function(){initAutoComplete(document.getElementById('form-test'),
document.getElementById('champ-texte'),document.getElementById('select-par'),document.getElementById('bouton-submit'))};
</script>
    </head>
    <body> 
  
<div id="body">
<form name="form-test" id="form-test" action="resultat.php" method="post" style="margin-left: 50px; margin-top:20px">
            <input type="text" class="champ_texte" name="champ-texte" id="champ-texte" size="20" autocomplete="off" />
            <select id="select-par" name="select-par" >
            <option value="motcle" selected="selected">Par mots clés</option>
            <option  value="titre">Par titre</option>
            <option  value="date">Par date</option>
      </select>
                    
            <input type="submit"  class="bouton_valider_recherche" id="bouton-submit">
        </form>
        </div>

    </body>
</html>

Modifié par frdiard (20 Apr 2009 - 13:37)
Ma question est comment créer la condition pour que ce que je décris plus haut fonctionne ( quelles sont les modifications à faire sur le html <select> et sur le javascript) .

Merci de votre aide ! Smiley cligne
tu ne veux pas utilisé des example d'auto completion dejà tout fait?
il existe des librairies javascript qui le gere relativement bien

setTimeout("mainLoop()",200)
tu trouve pas que ta fonction et trop souvent appellé????
connais tu la les évenement onchange?

PS : dsl, mais je trouve ton code tres charger ca donne pas envie de chercher...
Pourrais-tu me donner un lien vers une librairie js qui ferai cela car j'ai déja beaucoup cherché mais je n'ai rien trouvé qui me convenais ?

Merci;
En ce qui concerne l'autocompletion
ca existe aussi bien avec jquery (jquery.ui) ou prototype (script.aculo.us) ou d'en d'autre...

bon courrage....
Sujet clos
Aller à