{"id":201,"date":"2014-01-16T15:24:37","date_gmt":"2014-01-16T14:24:37","guid":{"rendered":"http:\/\/www.francelabs.com\/blog\/?p=201"},"modified":"2014-01-17T12:10:02","modified_gmt":"2014-01-17T11:10:02","slug":"integrating-solr-with-spip","status":"publish","type":"post","link":"https:\/\/www.francelabs.com\/blog\/integrating-solr-with-spip\/","title":{"rendered":"Integrating Solr with SPIP"},"content":{"rendered":"<p>Note: French version available at the second half of this blog entry.<\/p>\n<p>Note Note: don&#8217;t hesitate to test our new open source package solution <a href=\"http:\/\/www.datafari.com\/en\" target=\"_blank\">Datafari<\/a>, which combines Apache ManifoldCF, Apache Solr and <a href=\"http:\/\/www.francelabs.com\/en\/ajaxfrancelabs.html\" target=\"_blank\">AjaxFranceLabs <\/a>\ud83d\ude42<\/p>\n<p>SPIP is a well known open source platform. We wanted to share with you how to integrate graphically a Solr server with a SPIP server. The scenario is the following: you already have SPIP based web site, and you want to have a nice search functionnality based on the lastet Solr, to benefit from all its cool functionalities. You have set up a Solr, you have crawled your SPIP content, but now you want to have your Solr search in your SPIP website. This is what we present in this tutorial.<\/p>\n<p><!--more--><\/p>\n<p>Note that since the default UI of Solr is not what you should be using (it&#8217;s not part of its core job), you can use external graphical frameworks such as AjaxSolr or AjaxFranceLabs. In our demo, we use the latter. The tutorial can be applied to other frameworks, you&#8217;ll just need to slightly adapt the steps.<\/p>\n<p>Note also that since we have our own Solr based search solution, Datafari, the tutorial uses it as a pre-requisite, but you can do it with a Solr as long as you combine it yourself with the AjaxFranceLabs framework.<\/p>\n<p>We are presenting two use cases:<\/p>\n<ul>\n<li>Adding a search functionality from Solr to SPIP<\/li>\n<li>Adding a search textbox with autocomplete, that leads you to the search page.<\/li>\n<\/ul>\n<p>Pre-requisites:<\/p>\n<ul>\n<li>Datafari version >= 0.6.9<\/li>\n<li>Spip (this tutorial was made with v2.0.9)<\/li>\n<\/ul>\n<p>All the required files for this tutorial can be downloaded here (except for Datafari and SPIP): <em>http:\/\/www.francelabs.com\/files\/SPIP_Solr_files.zip<\/em><\/p>\n<p>In both use cases with have decided to integrate the AjaxFranceLabs page in an iFrame, called the results page. The advantage is that it is fast to setup, and the integration is easy in an existing system.<\/p>\n<p><strong>Replacing the search functionality of SPIP<\/strong><\/p>\n<p>Pre-requisite:<\/p>\n<ul>\n<li>Download the file <em>searchbar-minimal.js<\/em><\/li>\n<\/ul>\n<p>To implement this functionality, we&#8217;ll be using tags specific to SPIP (see <a href=\"http:\/\/www.spip.net\/fr_article903.html\">http:\/\/www.spip.net\/fr_article903.html<\/a> )<\/p>\n<p>The <em>#RECHERCHE<\/em> tag allows us to display the user query.<\/p>\n<p>Start by editing the <em>recherche.html<\/em> file which is located in <em>spip\/squelettes-dist<\/em> and delete all the code within the following tags: <em><\/p>\n<div id=\"conteneur\"><\/div>\n<p><\/em> :<\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_recherche.html.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-202\" alt=\"spip_recherche.html\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_recherche.html-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>Add the iframe that will be containing the results page from AjaxFranceLabs:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;iframe src=&quot;http:\/\/IP_Datafari\/Datafari\/search.jsp?query=#RECHERCHE&quot; height=&quot;1600px&quot; width=&quot;820px&quot; frameborder=&quot;0&quot; &gt;&lt;\/iframe&gt;\r\n<\/pre>\n<p>Add the link to the CSS file <em>fl.css<\/em>, which contains the proper dimensions of the SPIP window:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/fl.css&quot; media=&quot;screen&quot; \/&gt;\r\n<\/pre>\n<p>Adjust the dimensions of the frame and don&#8217;t forget to empty the cache of your SPIP (server side, located in <em>spip\/tmp\/cache<\/em>), in order to quickly see your changes.<\/p>\n<p>Once this is done, you have already replaced the basic SPIP search by the one of Datafari.<\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_datafari_search.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-205\" alt=\"spip_datafari_search\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_datafari_search-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p><strong>Adding a new textbox with autocomplete<\/strong><\/p>\n<p>In this section, we&#8217;ll be explaining how to add a new textbox on the spip site, with autocomplete, and how to access the results page with the Datafari iFrame once the user made his query.<\/p>\n<p>First, you need to add the AjaxFranceLabs libraries that are requited to make autocomplete work.<\/p>\n<p>In this tutorial, they have been added in <em>spip\/js<\/em><\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_ajaxfrancelabs_folder.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-206\" alt=\"spip_ajaxfrancelabs_folder\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_ajaxfrancelabs_folder-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>Edit the file <em>searchbar-minimal.js<\/em> and change the url of your Datafari (or Solr) server that the line <em>serverUrl<\/em>. The parameter <em>redirectServerUrl<\/em> is used to point to the results page that will be diplayed to the user (by default, it points the SPIP default search results page).<\/p>\n<p>Then, we need to edit the page where the textbox with Autocomplete will be inserted. In our exemple, we play with the <em>agenda.html<\/em> page (in <em>spip\/squelettes-dist<\/em>). Add the AjaxFranceLabs libraries that you can find in Datafari, in order to make autocomplete work:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;js\/AjaxFranceLabs\/jquery-1.8.1.min.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/jquery-ui-1.8.23.min.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/Core.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/AbstractModule.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/AbstractWidget.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/Parameter.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/ParameterStore.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/AbstractManager.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/manager\/Manager.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/modules\/Autocomplete.module.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/widgets\/SearchBar-minimal.widget.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/searchbar-minimal.js&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Add a link also to the CSS file for the look and feel of the textbox:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/autocomplete-minimal.css&quot; media=&quot;screen&quot; \/&gt;\r\n<\/pre>\n<p>Ann the following code where you want the textbox to be displayed:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;searchBar&quot;&gt;&lt;\/div\r\n&gt;<\/pre>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/code_spip_searchbar.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-208\" alt=\"code_spip_searchbar\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/code_spip_searchbar-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>You get the following text box with autocomplete:<\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_textbox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-209\" alt=\"spip_textbox\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_textbox-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>Then you need to edit the result page <em>recherche.html<\/em>, located in <em>spip\/squelettes-dist<\/em>.<\/p>\n<p>First, delete the code contained in the following tags: <em><\/p>\n<div id=\"conteneur\">\n<div><\/em><\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_recherche.htmlbis.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-210\" alt=\"spip_recherche.htmlbis\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_recherche.htmlbis-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>Then add the CSS file <em>fl.css<\/em>:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/fl.css&quot; media=&quot;screen&quot; \/&gt;\r\n<\/pre>\n<p>Then we need to retrieve the user&#8217;s GET query: <em>$_GET[&#8216;query&#8217;]<\/em><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;?php $rechercher = &quot;http:\/\/IP_Datafari\/Datafari\/search.jsp?query=&quot;.$_GET&#x5B;'query'];?&gt;\r\n<\/pre>\n<p>This query will be passed on to the iFrame in order to display the search results provided by Datafari (or Solr):<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;iframe src=&quot;&lt;?php echo ($rechercher) ; ?&gt;&quot; height=&quot;1600px&quot; width=&quot;820px&quot; frameborder=&quot;0&quot; &gt;&lt;\/iframe&gt;\r\n<\/pre>\n<p>You do get the search results of Datafari based on the user&#8217;s query:<\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_solr_final.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-214\" alt=\"spip_solr_final\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_solr_final-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<\/p>\n<p>Version fran\u00e7aise:<\/p>\n<p>SPIP est une plateforme open source de gestion de contenu web tr\u00e8s r\u00e9pandue, notamment en France.Nous voulions partager avec vous comment int\u00e9grer graphiquement un moteur de recherche type Solr avec un serveur SPIP. Le sc\u00e9nario est le suivant: vous avez d\u00e9j\u00e0 un site web bas\u00e9 sur SPIP, et vous voulez ajouter une super fonctionnalit\u00e9 de recherche bas\u00e9e sur le dernier Solr, pour b\u00e9n\u00e9ficier de toutes ses derni\u00e8res fonctionnalit\u00e9s. Vous avez un Solr en place, vous avez index\u00e9 le contenu de SPIP, mais \u00e0 pr\u00e9sent vous voulez avoir votre recherche Solr int\u00e9gr\u00e9e dans votre site web sous SPIP. C&#8217;est ce que nous pr\u00e9sentons dans ce tuto.<\/p>\n<p>Il faut noter que bien que Solr fournisse une IHM de base, ce n&#8217;est pas ce que vous devriez utiliser, car cela rel\u00e8ve plus de la preuve de concept et du debugging que d&#8217;une IHM pro (l&#8217;IHM d&#8217;utilisation ne fait d&#8217;ailleurs pas parti des missions du projet Apache Solr). Nous vous recommandons donc d&#8217;utiliser un framework graphique tierce, \u00e0 l&#8217;image AjaxSolr ou d&#8217;<a title=\"Explications sur ajaxfrancelabs\" href=\"http:\/\/www.francelabs.com\/ajaxfrancelabs.html\" target=\"_blank\">AjaxFranceLabs<\/a>. Dans notre tuto, nous utilisons ce dernier. Mais vous pouvez en utiliser d&#8217;autres, du moment que vous modifiez l\u00e9gerement les \u00e9tapes pr\u00e9sent\u00e9es ci-dessous.<\/p>\n<p>NOTE: nous avons notre propre solution de search bas\u00e9e sur Solr, <a href=\"http:\/\/www.datafari.com\" target=\"_blank\">Datafari<\/a>. Ce tutoriel utilise donc Datafari comme un pr\u00e9-requis, mais vous pouvez le faire avec Solr du moment que vous le combinez vous-m\u00eame avec le framework AjaxFranceLabs.<\/p>\n<p><img decoding=\"async\" title=\"More...\" alt=\"\" src=\"https:\/\/www.francelabs.com\/blog\/wp-includes\/js\/tinymce\/plugins\/wordpress\/img\/trans.gif\" \/><\/p>\n<p>Nous verrons deux cas de figure :<\/p>\n<ul>\n<li>Remplacer la fonctionnalit\u00e9 de recherche de SPIP par Datafari<\/li>\n<\/ul>\n<ul>\n<li>Ajouter une nouvelle textbox avec autocompl\u00e9tion qui ram\u00e8ne vers la page de r\u00e9sultats de Datafari.<\/li>\n<\/ul>\n<p>Pr\u00e9requis :<\/p>\n<ul>\n<li>Datafari v >= 0.6.9<\/li>\n<li>Spip (tuto r\u00e9alis\u00e9 sous spip v 2.0.9)<\/li>\n<\/ul>\n<p>Tous les fichiers n\u00e9cessaires \u00e0 ce tutoriel sont t\u00e9l\u00e9chargeables ici (\u00e0 part Datafari et SPIP): <em>http:\/\/www.francelabs.com\/files\/SPIP_Solr_files.zip<\/em><\/p>\n<p>Dans les deux solutions nous avons fait le choix d\u2019int\u00e9grer la page AjaxFranceLabs au sein d\u2019une iframe appel\u00e9e par la page de r\u00e9sultats.<\/p>\n<p>L\u2019avantage de ce choix est la rapidit\u00e9 de mise en \u0153uvre de la solution et son int\u00e9gration ais\u00e9e au sein d\u2019un syst\u00e8me d\u00e9j\u00e0 en place.<\/p>\n<p><strong>Remplacement de la fonctionnalit\u00e9 de Recherche de SPIP<\/strong><\/p>\n<p>Pr\u00e9requis :<\/p>\n<ul>\n<li>T\u00e9l\u00e9charger le fichier <em>searchbar-minimal.js<\/em><\/li>\n<\/ul>\n<p>Pour r\u00e9aliser cela, nous allons nous servir des balises propres \u00e0 Spip (<a href=\"http:\/\/www.spip.net\/fr_article903.html\">http:\/\/www.spip.net\/fr_article903.html<\/a>)<\/p>\n<p>La balise <em>#RECHERCHE<\/em> nous sert \u00e0 afficher la requ\u00eate entr\u00e9e par l\u2019utilisateur.<\/p>\n<p>Editer le fichier <em>recherche.html<\/em> contenu dans <em>spip\/squelettes-dist<\/em> et supprimer tout le code contenu entre les balises <em><\/p>\n<div id=\"conteneur\">\n<div><\/em>:<\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_recherche.html.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"spip_recherche.html\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_recherche.html-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>Ajouter l&#8217;iframe qui va contenir la page de r\u00e9sultats AjaxFranceLabs:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;iframe src=&quot;http:\/\/IP_Datafari\/Datafari\/search.jsp?query=#RECHERCHE&quot; height=&quot;1600px&quot; width=&quot;820px&quot; frameborder=&quot;0&quot; &gt;&lt;\/iframe&gt;\r\n<\/pre>\n<p>Ajouter le lien vers le fichier CSS fl.css pour redimensionner la fen\u00eatre SPIP :<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/fl.css&quot; media=&quot;screen&quot; \/&gt;\r\n<\/pre>\n<p>Ajuster les valeurs de dimensions de la frame et penser \u00e0 vider le cache de SPIP pour visualiser les changements (dans spip\/tmp\/cache).<\/p>\n<p>Apr\u00e8s cet ajout de code tr\u00e8s simple, la recherche de base de SPIP est remplac\u00e9e par celle de Datafari.<\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_datafari_search.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"spip_datafari_search\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_datafari_search-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p><strong>Ajouter une nouvelle textbox avec autocomplete<\/strong><\/p>\n<p>Dans cette section, nous allons aborder le cas o\u00f9 l&#8217;on souhaite ajouter une nouvelle textbox sur le site avec autocompl\u00e9tion et ramener l&#8217;utilisateur vers la page de r\u00e9sultats qui contiendra une iframe de Datafari.<\/p>\n<p>Dans un premier temps, il faut ajouter les librairies AjaxFranceLabs n\u00e9cessaires pour faire fonctionner l&#8217;autocompl\u00e9tion notamment.<br \/>\nDans le cadre de ce tutoriel, celles-ci ont \u00e9t\u00e9 ajout\u00e9es dans <em>spip\/js<\/em>:<\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_ajaxfrancelabs_folder.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"spip_ajaxfrancelabs_folder\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_ajaxfrancelabs_folder-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>Editer le fichier <em>searchbar-minimal.js<\/em> et modifier l&#8217;url du serveur Datafari \u00e0 la ligne <em>serverUrl<\/em>. Le param\u00e8tre <em>redirectServerUrl<\/em> sert \u00e0 indiquer la page de r\u00e9sultats qui sera affich\u00e9e \u00e0 l&#8217;utilisateur (par d\u00e9faut la page de r\u00e9sultats de base de Spip).<\/p>\n<p>Apr\u00e8s cela, nous allons \u00e9diter la page o\u00f9 sera plac\u00e9e la textbox avec l&#8217;autocomplete.<\/p>\n<p>Dans cet exemple, il s&#8217;agit de la page <em>agenda.html<\/em> (dans <em>spip\/squelettes-dist<\/em>)<\/p>\n<p>Ajouter les librairies AjaxFranceLabs extraites de Datafari pour faire fonctionner l&#8217;autocomplete:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;js\/AjaxFranceLabs\/jquery-1.8.1.min.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/jquery-ui-1.8.23.min.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/Core.js&quot;&gt;&lt;\/script&gt;\t\r\n\t        &lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/AbstractModule.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/AbstractWidget.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/Parameter.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/ParameterStore.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/core\/AbstractManager.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/manager\/Manager.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/modules\/Autocomplete.module.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/AjaxFranceLabs\/widgets\/SearchBar-minimal.widget.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type =&quot;text\/javascript&quot; src =&quot;js\/searchbar-minimal.js&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Ajouter un lien \u00e9galement vers un fichier CSS pour l&#8217;aspect de la textbox:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/autocomplete-minimal.css&quot; media=&quot;screen&quot; \/&gt;\r\n<\/pre>\n<p>Et ajouter le code suivant \u00e0 l&#8217;emplacement souhait\u00e9 pour l&#8217;affichage de la textbox:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;searchBar&quot;&gt;&lt;\/div&gt;\r\n<\/pre>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/code_spip_searchbar.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"code_spip_searchbar\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/code_spip_searchbar-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>On obtient la textbox suivante:<\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_textbox.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"spip_textbox\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_textbox-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>Puis \u00e9diter la page de r\u00e9sultats <em>recherche.html<\/em> situ\u00e9 dans <em>spip\/squelettes-dist<\/em>.<\/p>\n<p>Tout d&#8217;abord supprimer tout le code contenu entre les balises <em><\/p>\n<div id=\"conteneur\">\n<div><\/em><\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_recherche.htmlbis.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"spip_recherche.htmlbis\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_recherche.htmlbis-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>On ajoute le fichier CSS <em>fl.css<\/em>:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/fl.css&quot; media=&quot;screen&quot; \/&gt;\r\n<\/pre>\n<p>Puis on r\u00e9cup\u00e8re la requ\u00eate envoy\u00e9e par l&#8217;utilisateur en GET: <em>$_GET[&#8216;query&#8217;]<\/em><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;?php&lt;br \/&gt;  $rechercher = &quot;http:\/\/IP_Datafari\/Datafari\/search.jsp?query=&quot;.$_GET&#x5B;'query'];&lt;br \/&gt;?&gt;\r\n<\/pre>\n<p>Celle-ci va \u00eatre pass\u00e9e \u00e0 l&#8217;iframe afin d&#8217;afficher les r\u00e9ponses retourn\u00e9es par Datafari (ou Solr):<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;iframe src=&quot;&lt;?php echo ($rechercher) ; ?&gt;&quot; height=&quot;1600px&quot; width=&quot;820px&quot; frameborder=&quot;0&quot; &gt;&lt;\/iframe&gt;\r\n<\/pre>\n<p>On obtient bien la page de r\u00e9sultats de Datafari avec la requ\u00eate utilisateur:<\/p>\n<p><a href=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_solr_final.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"spip_solr_final\" src=\"https:\/\/www.francelabs.com\/blog\/wp-content\/uploads\/2014\/01\/spip_solr_final-150x150.png\" width=\"150\" height=\"150\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: French version available at the second half of this blog entry. Note Note: don&#8217;t hesitate to test our new open source package solution Datafari, which combines Apache ManifoldCF, Apache Solr and AjaxFranceLabs \ud83d\ude42 SPIP is a well known open &hellip; <a href=\"https:\/\/www.francelabs.com\/blog\/integrating-solr-with-spip\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,12],"tags":[18,33,59,34],"class_list":["post-201","post","type-post","status-publish","format-standard","hentry","category-search","category-solr","tag-ajaxfrancelabs","tag-datafari","tag-solr","tag-spip"],"_links":{"self":[{"href":"https:\/\/www.francelabs.com\/blog\/wp-json\/wp\/v2\/posts\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.francelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.francelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.francelabs.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.francelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":12,"href":"https:\/\/www.francelabs.com\/blog\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"predecessor-version":[{"id":220,"href":"https:\/\/www.francelabs.com\/blog\/wp-json\/wp\/v2\/posts\/201\/revisions\/220"}],"wp:attachment":[{"href":"https:\/\/www.francelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.francelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.francelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}