Encore moi,
Je vous met le code que j’ai mis un plus haute qui permet avoir une page résultat.
Dites moi s’il y a des erreurs et s’il y a des choses a rajouté.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
head>
<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
<title><:resultats_recherche:> - [(#NOM_SITE_SPIP|textebrut)]</title>
<INCLURE{fond=inclure/head} />
<meta name="robots" content="none" />
</head>
<body class="pas_surlignable page_rubrique">
<div class="page">
<INCLURE{fond=inclure/header} />
<INCLURE{fond=inclure/nav,env} />
<div class="main">
[(#REM) Contenu principal : Resultats de la recherche ]
<div class="wrapper">
<p class="arbo"><a href="#URL_SITE_SPIP/"><:accueil_site:></a> > <:info_recherche_a_liste_deroulante:>[ > <strong class="on">(#RECHERCHE)</strong>]</p>
<div class="content" id="content">
[(#REM)*********************** Début de la zone d 'affichage des articles trouves dans la recherche multicritères.*********************]
<div id="resultat_recherche">
<div id="nouvelle_recherche">
<a href="http://localhost/stage/recherche_a_liste_deroulante.html" title="Recherche a liste deroulante">Recherche a liste deroulante</a>
</div>
[(#REM) On rappelle les mots clés sélectionnés par l'utilisateur. ]
[(#REM) Ca ne s'affiche pas au chargement de la page. Ca ne s'affiche que si la boucle motcleM est appelée, càd si on a cliqué sur le submit du formulaire.]
[(#REM) Si on n'a rien choisi dans les selects et qu'on clique submit, l'affichage renvoie "vous avez choisi d'utiliser 0 mot clé" et "0 article trouvé".]
#SET{ajouteun,1}
#SET{addition,0}
<B_motcleM>
<div class="cartouche">
<h1><:resultats_recherche:></h1>
<p> </p>
<p><strong>Dans votre recherche, vous avez choisi d'utiliser [(#GET{addition})] [(#GET{addition}|=={0}|?{'mot clé.',[(#GET{addition}|>{1}|?{'mots clés :','mot clé :'})]})] </strong></p>
<ol>
<BOUCLE__Tags(MOTS) {tableau #ENV**{motcle}} {id_groupe=1} {par titre}> <!-- <BOUCLE_motcleM(POUR) remplacé par __Tags(MOTS) -->
<p class="soustitre">
<BOUCLE_articles(ARTICLES) {id_mot=#VALEUR}><!-- <BOUCLE_multi(MOTS) remplacé par _articles(ARTICLES)-->
<li><a href="#URL_ARTICLE">
<strong>[(#LOGO_ARTICLE|right||image_passe_partout{120,100}|image_recadre{120,100,center})]#TITRE</strong>
<br /><small>[(#CHAPO*|textebrut|couper{180})]</small></a>
</li>
#SET{addition, #GET{addition}|plus{#GET{ajouteun}}}
</BOUCLE_articles>
</p>
</BOUCLE__Tags>
</ol>
</div>
[(#REM) Puis on construit le tableau qui contient tous les articles qui correspondent à au moins 1 mot clé sélectionné]
#SET{art_select,#ARRAY}
<B_select>
<BOUCLE_selectTags(MOTS) {tableau #ENV**{motcle}} {id_groupe=1} {par titre}>
<BOUCLE_articlesselect(ARTICLES) {id_mot} {par num titre} {!par date}
#SET{art_select, #GET{art_select}|push{ #ID_ARTICLE }}
</BOUCLE_articlesselect>
</BOUCLE_selectTags>
</B_select>
<//B_select>
[(#REM) Pour afficher le résultat du tableau, ajouter ici [(#GET{art_select}|foreach)] ]
[(#REM) On finit par lister les articles qui apparaissent au moins une fois dans le tableau art_select (voir boucle BOUCLE_rangement) et le nombre de mots-clefs correspondant (voir boucle BOUCLE_ingr) ]
#SET{un, 1}
#SET{compteur_1, #ARRAY}
#SET{compteur_2, #ARRAY}
#SET{compteur_3, #ARRAY}
#SET{compteur_4, #ARRAY}
#SET{compteur_5, #ARRAY}
#SET{compteur_6, #ARRAY}
#SET{compteur_7, #ARRAY}
#SET{compteur_8, #ARRAY}
#SET{compteur_9, #ARRAY}
#SET{compteur_10, #ARRAY}
<B_rangement>
[(#REM) Chaque article nouveau qui passe dans la boucle BOUCLE_rangement vient du tableau art_select (càd que c'est un article relié à AU MOINS un mot clé parmi les mots clé sélectionnés).]
<BOUCLE_rangement(ARTICLES) {id_article IN #GET{art_select}}>
[(#REM) Le compteur de mots clés sélectionnés reliés à l'article est une variable dont la valeur démarre à zéro pour chaque article nouveau qui passe dans la boucle BOUCLE_rangement.]
#SET{compteur_sup,0}
[(#REM) Pour chaque article qui passe, on récupère l'id de l'article dans la variable article ci-dessous.]
#SET{article,#ID_ARTICLE}
[(#REM) on regarde dans le tableau art_select si le même article apparaît plusieurs fois.]
[(#REM) Explication : un même article peut appraître plusieurs fois, parce que art_select liste les articles qui on AU MOINS un mot clé parmi les mots clé sélectionnés ;]
[(#REM) donc si un article a 4 mots clés (A, B, C et D), il apparaît 1 fois pour A, 1 fois pour A+B, 1 fois pour A+B+C, 1 fois pour A+B+C+D ; donc ça fait 4 fois.]
<BOUCLE_ingr(POUR) {tableau #GET{art_select}}>
[(#REM) #VALEUR correspond à un #ID_ARTICLE dans le tableau art_select (on peut l'afficher avec #CLE=>#VALEUR) .]
[(#REM) On récupère l'id de l'article dans la variable valeur.]
#SET{valeur,#VALEUR}
[(#REM) Chaque fois que la soustraction des 2 id d'articles est égale à zéro, ça veut dire que les id étaient identiques.]
[(#REM) On fait la soustraction.]
#SET{dif, #GET{valeur}|moins{#GET{article}}}
[(#REM) Si le résiultat = 0, alors on incrémente la variable compteur_sup de 1 grâce à son addition avec la variable un. ]
[(#GET{dif}|=={0}|oui) #SET{compteur_sup, #GET{compteur_sup}|plus{#GET{un}}}]
[(#REM) A la fin (au sortir de BOUCLE_ingr), compteur_sup a une valeur maximale, qui correspond au nombre maximum de mots clés sélectionnés auxquels l'article qui passe dans BOUCLE_rangement est relié.]
[(#REM) On peut aussi afficher ici #GET{compteur_sup} pour vérifier combien il vaut.]
</BOUCLE_ingr>
[(#REM) Ci-dessous, j'ai une ligne par compteur numéroté.]
[(#REM) Ca va me permettre de classer l'article en fonction du nombre maximum de mots clés sélectionnés auxquels il est relié.]
[(#REM) Chaque compteur numéroté est un tableau ARRAY vide au départ.]
[(#REM) La boucle BOUCLE_ingr m'a donné le nombre maximal de mots clé reliés à l'article en train de passer dans la boucle BOUCLE_rangement.]
[(#REM) Ce nombre, c'est la valeur de compteur_sup. ]
[(#REM) Si la valeur de compteur_sup = 4, je colle le id de l'article dans le tableau compteur_4. Si sa valeur = 3, je colle le id de l'article dans le tableau compteur_3. Etc. ]
[(#GET{compteur_sup}|=={10}|oui) #SET{compteur_10, #GET{compteur_10}|push{#ID_ARTICLE}}]
[(#GET{compteur_sup}|=={9}|oui) #SET{compteur_9, #GET{compteur_9}|push{#ID_ARTICLE}}]
[(#GET{compteur_sup}|=={8}|oui) #SET{compteur_8, #GET{compteur_8}|push{#ID_ARTICLE}}]
[(#GET{compteur_sup}|=={7}|oui) #SET{compteur_7, #GET{compteur_7}|push{#ID_ARTICLE}}]
[(#GET{compteur_sup}|=={6}|oui) #SET{compteur_6, #GET{compteur_6}|push{#ID_ARTICLE}}]
[(#GET{compteur_sup}|=={5}|oui) #SET{compteur_5, #GET{compteur_5}|push{#ID_ARTICLE}}]
[(#GET{compteur_sup}|=={4}|oui) #SET{compteur_4, #GET{compteur_4}|push{#ID_ARTICLE}}]
[(#GET{compteur_sup}|=={3}|oui) #SET{compteur_3, #GET{compteur_3}|push{#ID_ARTICLE}}]
[(#GET{compteur_sup}|=={2}|oui) #SET{compteur_2, #GET{compteur_2}|push{#ID_ARTICLE}}]
[(#GET{compteur_sup}|=={1}|oui) #SET{compteur_1, #GET{compteur_1}|push{#ID_ARTICLE}}]
[(#REM) Mon formulaire contient 4 select, chacun pour un groupe de mots, les options des select c'est pour les mots du groupe).]
[(#REM) Mes select ne sont pas multiples, donc un seul mot de chaque groupe sera sélectionné. Cela me fait 4 mots clés sélectionnables au max.]
[(#REM) C'est pour ça qu'ici j'ai fait 4 compteurs numérotés.]
[(#REM) Si les selects étaient multiples (plusieurs mots sélectionnables dans un select-groupe), ou si on avait des cases à cocher, on pourrait s'amuser à proposer des centaines de mots clés sélectionnables.]
[(#REM) Donc il faudrait remplacer 4 par le nombre maxi de mots clés sélectionnables (ex: 150), puis créer des compteurs numérotés dégressifs (149,148, etc.).]
[(#REM) Mais intellectuelmlement, l'utilisateur ne peut suivre que si on lui propose que peu de critères-groupes de choix. ]
[(#REM) Avec des selects multiples, ou des cases à cocher, il faudrait donc, si les mots clés sont nombreux, ranger ces mots clés dans des critères-groupes de choix au sein desquels un seul choix n'est possible.]
[(#REM) L'important, c'est de s'organiser pour ne pas avoir trop de mots clés à gérer ici.]
[(#REM) Si je modifie mon formulaire, je dois ajouter (ou enlever des compteurs numérotés ci-dessous. ]
[(#REM) Pour voir le tableau des compteurs numérotés écrire ici : [(#GET{compteur_4}|foreach)]<br /> [(#GET{compteur_1}|foreach)]<br /> [(#GET{compteur_2}|foreach)]<br /> [(#GET{compteur_3}|foreach)]<br /> ]
[(#REM) Balises de fin de la boucle B_motcleM. ]
</B_motcleM>
<//B_motcleM>
</div> <!-- Fin de la div id="resultat_recherche" -->
[(#REM)*********************** Fin de la zone d 'affichage des articles trouves dans la recherche multicritères.*********************]
</div><!--.content-->
</div><!--.wrapper-->
<div class="aside">
<BOUCLE_focus(RUBRIQUES){id_rubrique = 19}>
[(#FOCUS|image_reduire{260,0})]
</BOUCLE_focus>
<INCLURE{fond=inclure/navsub, id_rubrique} />
<INCLURE{fond=inclure/cherche} /><!--Recherche et réseaux sociaux-->
<INCLURE{fond=inclure/listederoulante} />
</div><!--.aside-->
</div><!--.main-->
<INCLURE{fond=inclure/footer,self=#SELF} />
</div><!--.page-->
</body>
</html>
Merci.
Et je vous remet le code HTML (non séparer de ses fonctions JS et de ses CSS pour l’instant) :
<style>
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
background-color: gray;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: yellow;
}
</style>
<!--
fait reference à la valeur du selectedIndex de selectBox, toi tu veux bosser sur les valeurs de #checkboxes
tu devras boucler sur les differents inputs de #checkboxes et detecter ceux qui sont checked
un petit conseil au passage, separe ton js de ton html.
-->
<!--form method="post" class="multiselect" onChange="location.href=''+this.options[this.selectedIndex].value"-->
<!--div id="selectBoxId" class="selectBox" onclick="showCheckboxes()"-->
<div class="formulaire_spip formulaire_recherche_a_liste_deroulante">
<a name="formulaire_recherche_a_liste_deroulante" id="formulaire_recherche_a_liste_deroulante"></a>
<form class="multiselect" id="myForm" action="[(#ENV{action})]"> <!-- supression de la method="post" pour "empecher" la validation, c'est nous qui le gerons via l'écriture d'url ligne 154 -->
<div id="selectBoxId" class="selectBox">
<select>
<option selected>Tags</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<!-- La boucle ici est le code spip qui appelle mes mots dans la base depuis le nom de la table (MOTS), son id (id_groupe=1) et par leurs titre -->
<BOUCLE_Tags(MOTS) {id_groupe=1} {par titre} {pagination 20}>
<label >
<input type="checkbox" class="checkbox" value="#URL_MOT"/>#TITRE
<!-- <BOUCLE_articles(ARTICLES) {id_mot} {par num titre} {!par date} {pagination 20}>
<span id="pagesArticles" style="display: none;"><a href="#URL_ARTICLE"></a></span>
</BOUCLE_articles> -->
</label>
</BOUCLE_Tags>
</div>
<input type="button" id="validateButton" class="submit" value="Recherche" title="<:info_recherche_a_liste_deroulante:>">
</form>
</div>
<script>
var i,
urlFinale = "",
urlParametersArray = [],
expanded = false,
checkboxes = document.getElementById("checkboxes"),
selectBoxId = document.getElementById("selectBoxId"),
myForm = document.getElementById("myForm"),
validateBtn = document.getElementById("validateButton"),
checkboxesInputs = checkboxes.getElementsByTagName('input'),
nbCheckboxesInputs = checkboxesInputs.length;
function showCheckboxes() {
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
function addEventHandler(element, eventType, handler) {
if (element.addEventListener) {
element.addEventListener(eventType, handler, false);
} else {
// < IE9
element.attachEvent("on" + eventType, handler);
}
}
for (i = 0; i < nbCheckboxesInputs; i++) {
addEventHandler(checkboxesInputs[i], "change", function() {
if (this.checked) {
//console.log("yep");
// il est checké, on contrôle si la valeur existe déjà dans le tableau (pour ne pas l'ajouter 2 fois).
// ATTENTION methode Array.prototype.include() très peu supportée (cf mdn: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/includes)
// je te fais grâce du polyfill, on va le faire à l'ancienne
// doc indexOf : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/indexOf
if (urlParametersArray.indexOf(this.value) === -1) {
// l'élément n'existe pas, on l'ajoute au tableau
// doc push : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/push
urlParametersArray.push(this.value);
// debug purpose only, à supprimer en prod
console.table([urlParametersArray]);
}
} else {
//console.log("nope");
// ATTENTION, la checkbox n'est plus checkée, il va falloi retirer la valeur du tableau, on va se servir d'indexOf et de splice()
// doc de splice : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/splice
// Let's this shit begin...
var index = urlParametersArray.indexOf(this.value); // on récupère la position dans le tableau de la valeur à supprimer
urlParametersArray.splice(index, 1); // on degage la valeur, le tableau est réindexé, merci qui ???
// debug purpose only, à supprimer en prod
console.table([urlParametersArray]);
}
});
}
addEventHandler(validateBtn, "click", function () {
// doc join : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/join
urlFinale = urlParametersArray.join("");
location.href = urlParametersArray.join("");
});
addEventHandler(selectBoxId, "click", showCheckboxes);
// function function_name()
// {
// var titre =document.getElementById('TitreLD');
// var mon_titre = titre.innerText || titre.textContent;
// console.log(mon_titre);
// }
// function_name();
</script>
Merci encore une fois.
