ScrutariSuggestion

ScrutariSuggestion est une extension de la bibliothèque JQuery qui permet de suggérer des mots-clés lorsque l'internaute utilise un champ de recherche. Cette extension interroge le serveur Scrutari en lui soumettant les caractères que l'utilisateur est en train de saisir et le serveur retourne les mots-clés qui les contiennent. L'extension affiche alors les mots-clés sous forme d'une liste. Si l'utilisateur sélectionne un des mots-clés de la liste, celui est placé dans le champ de recherche entre guillemets, l'internaute peut alors valider la recherche.

ScrutariSuggestion doit beaucoup à l'extension Autocomplete de Jörn Zaefferer, qu'il en soit remercié. Comme Autocomplete, ScrutariSuggestion est sous double licence MIT et GPL.

Cette extension nécessite JQuery (testé avec 1.3 et 1.4) ainsi que les extensions AjaxQueue et éventuellement Bgiframe pour la compatibilité avec Internet Explorer 6. Ces différents fichiers sont disponibles sur à l'adresse http://jquery.exemole.fr/. Elle utilise également scrutarijs.basedata de la bibliothèque ScrutariJS.

Il suffit d'ajouter les lignes suivantes :

<script src="http://jquery.exemole.fr/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://jquery.exemole.fr/jquery.ajaxqueue-1.0.js" type="text/javascript"></script>
<script src="http://jquery.exemole.fr/jquery.bgiframe-2.1.1.min.js" type="text/javascript"></script>
<script src="http://jquery.exemole.fr/scrutarijs.basedata-1.0.js" type="text/javascript"></script>
<script src="http://jquery.exemole.fr/jquery.scrutarisuggestion-1.0.js" type="text/javascript"></script>

Note : pour un site en production, il est conseillé de faire ses propres copies des fichiers.

Par ailleurs, dans le répertoire http://jquery.exemole.fr/jquery.scrutarisuggestion-1.0/, se trouvent deux fichiers : jquery.scrutarisuggestion.css et sctsug_indicator.gif. jquery.scrutarisuggestion.css contient les instructions de mise en forme de la liste de mots-clés. Ce fichier doit être récupéré et adapté à la charte du site, on peut aussi copier son contenu dans une feuille de style existante. Toutes les classes définies par ce fichier commence par « sctsugg_ ». sctsug_indicator.gif est une image placée par la feuille de style dans le champ de saisie pour indiquer qu'une recherche est en cours.

La configuration minimale est la suivante. En prenant l'hypothèse que votre champ de recherche a comme identifiant CHAMP_RECHERCHE et que votre serveur Scrutari est accessible à l'adresse http://monsite.net/sct/monserveur, il suffit d'ajouter les lignes suivantes dans une balise <script> :

$(function() {
  $("#CHAMP_RECHERCHE").scrutarisuggestion("http://monsite.net/sct/monserveur/JSon");
});

$(function() est le raccourci de JQuery pour les instructions à lancer à la fin du chargement par le navigateur. L'extension ScrutariSuggestion a rajouté la méthode scrutarisuggestion à l'objet JQuery standard. Cette méthode prend au moins un argument qui est l'URL d'interrogation du protocole JSon du serveur (donc, ne pas oublier de rajouter /Json après l'adresse de votre serveur.

Il est possible de passer des options supplémentaires. Pour cela, il faut passer un objet en argument en plus de l'URL, cet objet ayant comme propriété les différentes options que l'on veut configurer. Le code suivant indique que la langue de recherche est le français, une largeur précise pour la liste des mots-clés ainsi que le fait que le premier élément de la liste ne doit pas être sélectionné immédiatement :

 $("#CHAMP_RECHERCHE").scrutarisuggestion("http://monsite.net/sct/monserveur/JSon", {
   langUi: "fr", 
   width: 260,
   selectFirst: false
 });

Les options disponibles sont les suivantes :

• langUi : langue de l'interface qui désigne la langue sur laquelle se fait la recherche de mots-clés (valeur par défaut : fr)
• withBaseIcon : true ou false, indique si les icones des bases doivent être affichés (valeur par défaut : true)
• width : largeur de la liste des mots-clés, si la valeur est 0, la largeur est déterminé par le style (valeur par défaut : 0)
• selectFirst : true ou false, indique si le premier mot-clé doit être sélectionné (valeur par défaut : true)
• minChars : nombre minimal de caractères saisis dans la zone à partir duquel le serveur Scrutari est interrogé (valeur par défaut : 3, le serveur ne renvoyant tout de façon pas de résultat s'il n'y a qu'un ou deux caractères).
• delay : nombre de millisecondes qu'attend le script pour interroger le serveur après la frappe d'un caractère (valeur par défaut : 400)
• submitOnSelect : sélecteur au sens JQuery identifiant un formulaire qui sera immédiatement soumis après sélection d'un mot-clé (si submitOnSelect vaut “#RECHERCHE”, cela équivaut à la commande $(“#RECHERCHE”].submit() ; si submitOnSelect est de longueur nulle, rien n'est fait (c'est la valeur par défaut)
• limit : nombre maximum de résultats retournés, la valeur -1 indique l'absence de limite (valeur par défaut : 50)
• supermotcleInput : sélecteur au sens JQuery du champ susceptible de contenir l'identifiant du mot-clé sélectionné par l'utilisateur dans la liste ; cette option est complémentaire de submitOnSelect, elle assure que la recherche va mettre en avant le mot-clé choisi par l'utilisateur

Toute option peut être modifiée après l'initialisation avec la méthode setOptions à laquelle on passe un objet argument identique à l'initialisation. On peut même modifier l'URL de Scrutari avec l'options url

$("#CHAMP_RECHERCHE").setOptions({
  url: "http://autresite.net/sct/autreserveur/JSon"
});