Autosuggestion et liste de sélection

**frdiard** · 20/04/2009, 00h04

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 !

Voici un bout de mon code qui je pense peut servir :

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
function initAutoComplete(form,field,submit){
  _documentForm=form;
  _inputField=field;
  _inputSelect=form.elements['select-par'].selectedIndex;//j importe le formulaire
  _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;//je le transforme en variable
 
 
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 champtexte
 
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')//je créer des conditions
{
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 formulaire ou le javascript va récupérér le select :

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
<!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 dautocompletion</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>

**andry.aime** · 20/04/2009, 08h39

Salut,

function mainLoop(){
if(_oldInputFieldValue!=_currentInputFieldValue){
var valeur=escapeURI(_currentInputFieldValue);

_currentInputFieldValue est une variable locale dans la fonction initAutoComplete(form,field,submit) donc tu n'a pas d'accès dans mainLoop()

**frdiard** · 20/04/2009, 09h14

Rebonjour,

Pourrais tu m'indiquer une méthode pour faire ce que je veux parce que je n'y arrive pas !

Merci d'avance

Fr.

**SpaceFrog** · 20/04/2009, 10h50

http://dcabasson.developpez.com/arti...ion-pas-a-pas/

**frdiard** · 20/04/2009, 11h09

Merci, je connais le lien et c'est d'ailleurs de ce script dont je veux parler.

Mais la réponse à ma question n'y est pas.

Je cherche à créer une condition à partir d'un select dans la page html, qui choissirait la page dans laquelle aller chercher les suggestions.

Par exemple si on sélectionne titre dans la liste déroulante, le script va chercher les suggestions dans la page titre.php.

merci d'avance !

**SpaceFrog** · 20/04/2009, 11h20

ben un script javascript intermediaire qui intervient sur la page de destination du send ?

**frdiard** · 20/04/2009, 11h27

Pourrais tu m'expliquer un peu le code ?

Merci

**SpaceFrog** · 20/04/2009, 11h58

On peut en savoir un peu plus sur la condition ?
quel est le critère de selection de la page ?

**frdiard** · 20/04/2009, 12h30

Dans la page html ou il y a mon champ texte, il y a un sélect pour choisir entre titre et mot clé.

Dans mon javascript qui affiche les mots clés au fur et à mesure que l'on tape ( les mots clés sont récupérés dans une page.php qui met les mots clés en xml )

Je voudrais que en fonction du choix dans le select, il choisit par exemple titre.php ou motcle.php pour là ou le javascript va chercher les mots clés.

voir les script donnés au dessus

Merci de votre aide !

**andry.aime** · 20/04/2009, 12h45

Je voudrais que en fonction du choix dans le select, il choisit par exemple titre.php ou motcle.php pour là ou le javascript va chercher les mots clés.

Mais le teste ou choix de la page de recherche dans function callSuggestions(valeur) avant _xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true);

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
function callSuggestions(valeur){
  if(_xmlHttp&&_xmlHttp.readyState!=0){
    _xmlHttp.abort()
  }
  _xmlHttp=getXMLHTTP();
  if(_xmlHttp){
    //MET TON TEST POUR LE CHOIX DE LA PAGE ICI ET AFFECTE LA VALEUR DANS _adresseRecherche
//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 requête
    _xmlHttp.send(null)
  }
}

Autosuggestion et liste de sélection

JavaScript

Discussions similaires

Partager

Partager