Recherche avec auto complétion

Chrys

Octobre 2017

Bonsoir,
Je recherche un système de « recherche avec auto complétion » pour cibler sur les titres d’article, est-ce qu’il existe un plug pour cela ou le coder soi-même ?

Merci

Formulaires Résolu

Par note Par date Par date chronologique

Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Octobre 2017

Il y a un bon article d’erational sur le sujet : https://contrib.spip.net/Realiser-un-champ-de-formulaire-avec-autocompletion

bonne lecture !
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Octobre 2017

Oui tchariss, justement c’est sur cet article que je me casse les dents depuis quelque jour.
Je suis passé en Spip 3.2 et suis en local pour le moment.
Dans les appels de js proposé dans l’article, je ne trouve pas les mêmes chemins dans prive, mais certains d’entre eux dans plugin_dist.
Puis je ne peux pas installer l’un des deux plug-ins proposés.
Indiquez l’intérêt que vous portez à cette réponse

0

Fa_b

Octobre 2017

Tu peux regarder aussi cet exemple là :
https://www.spip.net/@?lang=fr (plus récent ;)
Dans la source tu as une fonction function recherche_highlight() qui fonctionne sur la div #contenu--glossaire
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Octobre 2017

Pardon Fa_b, ton lien me mène a Spip.net !!
Je ne comprends pas.
Indiquez l’intérêt que vous portez à cette réponse

0

Fa_b

Octobre 2017

Oui au glossaire de spip.net, regarde le champs de recherche du glossaire (pas le champs de recherche principal de la page)
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Octobre 2017

Ok vu !! En jQuery en bas exact.
Je regarde ça tranquillement ce soir, merci ;)
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Octobre 2017

Ok Fa_b j’ai pu voir tout ça en effet.

Mais ça reste assez compliqué pour moi, je continue mes recherches, et si je trouve quelque chose je viendrai le mettre ici.
Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Octobre 2017

Hello,

Je te réponds sur le thread d’origine pour éviter de s’éparpiller (cf. https://forum.spip.net/fr_268295.html)

Le tutoriel d’erational est toujours d’actualité, il y a un seul point qui a changé avec les dernières versions de SPIP, c’est le chemin des scripts jqueryui. Il vaut mieux utiliser le pipeline dédié pour charger ces scripts, comme ça on a pas à se soucier du chemin.

1) Dans ton fichier mes_options.php, ajoute ceci :
@$GLOBALS['spip_pipeline']['jqueryui_plugins'] .= "|insert_jqueryui"; function insert_jqueryui($flux) { $flux[] = 'jquery.ui.autocomplete'; return $flux; }
2) Visite la page des plugins pour vider le cache.

3) Crée un fichier autocomplete.html qui va récupérer les valeurs de l’autocomplete
#HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET} [<BOUCLE_arts(ARTICLES){titre LIKE %#ENV{term}%}{par titre}{","}{0,10}>{"id":#ID_ARTICLE,"label":[(#TITRE|json_encode)],"value":[(#TITRE|json_encode)],"url_article":[(#URL_ARTICLE|json_encode)]}</BOUCLE_arts>]
Tu auras peut-être des résultats plus pertinents si change les critères {titre LIKE %#ENV{term}%}{par titre} par {recherche #ENV{term}}{par points}

4) Ajoute le script dans ton squelette qui contient l’input de recherche (avec l’id #recherche)
<script type="text/javascript"> $(function() { $( "#recherche").autocomplete({ source: "spip.php?page=autocomplete", minLength: 2, delay: 500, select: function (event, ui){ if (typeof ui.item.url_article != "undefined") { window.location = ui.item.url_article; } } }); }); </script>
Si tu ne souhaites pas que le clic renvoie vers la page de l’article, enlève la partie select: function()...

Voilà, chez moi ça marche©™
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Octobre 2017

Merci à toi,

J’ai suivi point par point tes indications sans rien modifier de ton code :

Etape 1 - Création du mes_options.php à la racine de mon dossier squelettes,
Etape 2 - Vidage du cache, comme je suis en local j’ai vidé le dossier tmp,
Etape 3 - Création du fichier autocomplete.html à la racine de mon dossier squelettes,
Etape 4 - Ajouts du script tel que tu l’écris toi même.

Le résultat chez moi :
– Je peux faire qu’une recherche à chaque fois que je vide le cache
– Lorsque je saisis une recherche, je n’ai pas la liste de proposition qui apparait au fur et à mesure
– Si je clique ou fais un retour chariot sur un résultat, cela ne m’amène pas sur l’article en question.

Je fais mes tests en local, je précise.
Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Octobre 2017

Il va falloir passer en mode debug :)

Vérifie que le script de jquery-ui est bien chargé avec les outils de développement de ton navigateur. Si tu es en local c’est mieux, il est préférable de désactiver la compression des scripts dans SPIP.
Sous firefox c’est : maj+ctrl+i, onglet "réseau", cocher "JS", et chercher jquery-ui.js

Si le script est bien chargé, regarde dans la console s’il y a des erreurs.

Enfin, tu peux aussi vérifier si le squelette de l’autocomplete fonctionne renvoie quelque chose sur la page spip.php?page=autocomplete&term=XXX (XXX à remplacer bien sûr)
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Octobre 2017

Ouaouuu OK :-)

Dis moi juste ce que je peux mettre ici comme info dans les erreurs trouvés, pour que vous puissiez m’aider ?

Merci de ton soutien
Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Octobre 2017

Ben tout ce qui apparaît dans la console d’erreur peut être utile, difficile de dire quoi à l’avance.
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Octobre 2017

Ok donc c’est parti, je fais comme tu me dis parce que moi et JS on est pas vraiment copain.

J’utilise Firefox et je ne compresse rien dans l’admin Spip.
Dans l’onget réseaux je vois bien apparaitre jquery-ui.js
Dans la console, je vois une ligne :
TypeError : $(…).autocomplete is not a function
Et si je clique au bout de cette ligne ca me dirige sur ma fonction :
<script type="text/javascript"> $(function() { $("#recherche").autocomplete({ source: "spip.php?page=autocomplete", minLength: 2, delay: 500, select: function (event, ui){ if (typeof ui.item.url_article != "undefined") { window.location = ui.item.url_article; } } }); }); </script>
Et pour finir, si je test l’autocomplete via une url, ici en écrivant factory, j’obtiens un résultat juste, mais pas sexy du tout :-) du genre :
["id":55,"label" :"Factory of Faith - RHCP","value" :"Factory of Faith - RHCP","url_article" :"spip.php ?article55"]
Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Octobre 2017

Ah on avance :)
Essaie avec ça :
<script type="text/javascript"> $(document).ready(function() { $("#recherche").autocomplete({ source: "spip.php?page=autocomplete", minLength: 2, delay: 500, select: function (event, ui) { if (typeof ui.item.url_article != "undefined") { window.location = ui.item.url_article; } } }); }); </script>
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Octobre 2017

Ok, ca donne la même chose a tous point de vue.
Désolé
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Octobre 2017

Sinon, contrairement a ce que j’ai dis au dessus, mon fichier mes_options.php est dans le répertoire config.
Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Octobre 2017

Juste pour être sûr, tu as bien recalculé la page avec var_mode=calcul ?

Le script est à quel niveau ? Dans le head ? Avant ou après le #INSERT_HEAD ?

À la rigueur passe faire un tour sur l’IRC #spip, ça sera plus simple.
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Octobre 2017

Oui j’utilise le var_mode=calcul
Le script est juste avant la balise fermante du body.

En t’écrivant, je pense a ça, mais je me situe dans le sommaire.html.
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Octobre 2017

Un grand merci à tchariss et b_b qui m’ont fait remarquer que j’avais plusieurs appels à jquery. Gné !
Ça fonctionne bien à présent https://www.the-ghost-bassist.com
Ce soir je dors sur un lit de ronce.