Autosuggestion et liste de sélection
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:
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:
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> |
