Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision
Révision précédente
clients:sctsugg [2010/05/08 16:22]
vincent créée
clients:sctsugg [2013/04/05 17:12] (Version actuelle)
Ligne 3: Ligne 3:
 //​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//​ 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.
  
-====== Installation ======+//​ScrutariSuggestion//​ doit beaucoup à l'​extension [[http://​bassistance.de/​jquery-plugins/​jquery-plugin-autocomplete/​|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/​+===== Installation ===== 
 + 
 + 
 +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 : Il suffit d'​ajouter les lignes suivantes :
Ligne 13: Ligne 16:
 <script src="​http://​jquery.exemole.fr/​jquery.ajaxqueue-1.0.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/​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>​ <script src="​http://​jquery.exemole.fr/​jquery.scrutarisuggestion-1.0.js"​ type="​text/​javascript"></​script>​
 </​code>​ </​code>​
  
-'''​Note :''' ​pour un site en production, il est conseillé de faire ses propres copies des fichiers.+**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. 
 + 
 +===== Configuration ===== 
 + 
 +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>//​ : 
 + 
 +<code javascript>​ 
 +$(function() { 
 +  $("#​CHAMP_RECHERCHE"​).scrutarisuggestion("​http://​monsite.net/​sct/​monserveur/​JSon"​);​ 
 +}); 
 +</​code>​ 
 + 
 +//​$(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. 
 + 
 +==== Options ==== 
 + 
 +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 : 
 + 
 +<code javascript>​ 
 + ​$("#​CHAMP_RECHERCHE"​).scrutarisuggestion("​http://​monsite.net/​sct/​monserveur/​JSon",​ { 
 +   ​langUi:​ "​fr",​  
 +   ​width:​ 260, 
 +   ​selectFirst:​ false 
 + }); 
 +</​code>​ 
 + 
 +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 
 + 
 +==== Modification des options ==== 
 + 
 +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 
 + 
 +<code javascript>​ 
 +$("#​CHAMP_RECHERCHE"​).setOptions({ 
 +  url: "​http://​autresite.net/​sct/​autreserveur/​JSon"​ 
 +}); 
 +</​code>​ 
  
clients/sctsugg.1273328558.txt.gz · Dernière modification: 2010/05/08 16:22 par vincent
CC Attribution-Share Alike 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0