Miximum » javascript

Autocomplete avec Solr

thibault — Mon, 27 Sep 2010 13:22:17 +0000

Voilà la reprise, les premiers froids, les feuilles qui tombent, la nostalgie des vacances, etc. Mais la rentrée est également pour moi l’opportunité de dépoussiérer un peu mon cerveau et ce blog, avec du temps consacré à l’indispensable… Veille techno. Parce que la veille, c’est comme le sport. Quand on ne pratique pas, on s’encrasse vite. Surtout quand on est freelance.

Bref, dans cet article, nous allons utiliser Solr, excellent moteur de recherche dont je vous ai déjà parlé, et implémenter l’autocomplétion de la recherche.

Solr pour l’autocomplétion, ou sortir la Grosse Bertha pour tuer une mite

Les plus attentifs d’entre vous se demanderont sans doute pourquoi utiliser Solr, puissant moteur de recherche full-text en java, pour une bête autocomplétion. Et effectivement, l’outil serait disproportionné si nous n’étions pas dans un des cas suivants :

Vous utilisez déjà Solr pour votre moteur de recherche. Dans ce cas, l’utiliser pour l’autocomplétion ne rajoutera pas une grosse charge ;
Vous souhaitez mettre en place une autocomplétion un peu avancée, avec séparation par facettes, etc ;

Solr, depuis la version 1.4, propose un nouveau module de recherche : Terms Component. Alors que Solr est généralement utilisé pour effectuer des recherches au niveau d’un document, ce module permet d’accéder au infos au niveau des termes présents dans les champs, permettant de répondre à la requête : « Quels sont les termes présent dans tel(s) champ(s), et à combien de document correspondent-ils ? ».

Par ailleurs, notez que nous allons créer une autocomplétion, et pas une autosuggestion. Pour bien cerner la différence, je vous recommande la lecture de cet excellent article sur les différents types d’assistance à la recherche.

Pour être précis, nous allons construire ça. Ceux qui lisent via un lecteur rss et qui n’auraient pas l’image, vous n’avez qu’à aller sur le site.

Pour les autres, vous remarquerez un bête champ de recherche tout ce qu’il y a de plus classique. L’autocomplétion, en revanche, est un tantinet évoluée, puisqu’elle s’effectue sur deux champs différents. Vous êtes prêts ? C’est parti !

Choisir les bons outils

À l’heure ou j’écris, la version stable de Solr est la 1.4.1. Elle présente toutefois un bug dans le formatage json des résultats. Nous utiliserons donc Solr dans sa version nightly build.

L’autocomplete sera assuré par jQuery, librairie javascript que l’on ne présente plus, et par son trés bon complément jQuery UI.

Notez l’existance d’une trés complète (mais assez complexe) librairie ajax pour Solr. Elle constitue pratiquement un framework à elle toute seule, et pour le coup, nous la laisserons de côté.

Le code ! Le code !

Commençons par le HTML. Ici, rien que du classique.


 xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  >
     type="text/javascript" src="./js/jquery-1.4.2.min.js">>
     type="text/javascript" src="./js/jquery-ui-1.8.5.custom.min.js">>
     type="text/javascript" src="./js/solr.js">>
 
     rel="stylesheet" type="text/css" media="screen" href="./css/ui-lightness/jquery-ui-1.8.5.custom.css" />
 
  >
  >
     action="" method="get">
       type="text" id="search" name="q" />
       type="submit" value="Search" />
    >
 
     id="result">
      >Results go here>
    >
  >
>

Un banal champ texte, l’inclusion des scripts nécessaires, et c’est tout. Circulez, ya rien à voir !

La configuration Solr n’est pas trés intéressante non plus. J’ai pris la première install de Solr qui m’est passée sous la main. Vous pouvez vous réferer au schema.xml d’un précédent article.

Le seul fichier vraiment intéressant est le javascript :

$(document).ready(function() {
  $('#search').autocomplete({
    source: function(request, response) {
      $.ajax({
        url: 'http://localhost:8983/solr/terms?terms.fl=name',
        dataType: 'jsonp',
        data: {
          wt: 'json',
          'json.nl': 'arrarr',
          'terms.prefix': request.term,
          'terms.sort': 'index',
          'terms.limit': 5,
          omitHeader: 'true'
        },
        jsonp: 'json.wrf',
        success: function(data) {
          response($.map(data.terms.name, function(item) {
            return {
              label: item[0] + ' (' + item[1] + ')',
              value: item[1]
            };
          }));
        }
      })
    }
  });
});

Quelques explications. Dans l’url utilisée par le widget d’autocomplétion, terms.fl désigne le champ qui sera utilisé pour la requête (ici : « name »).

Notez les options « datatype : jsonp », « wt : json », « json.nl : arrarr », « jsonp : wrf ». Elles permettent de faire fonctionner l’appel ajax en cross-domain (via jsonp au lieur de json), et d’obtenir un formatage correct du résultat de la part de Solr.

Enfin, dans le callback « result », nous formattons le résultat en utilisant la fonction $.map de jquery.

Nous avons maintenant un widget de recherche qui réalise une autocomplétion sur le champ « name ». C’est pas mal, mais nous souhaitions une autocomplétion à facette sur différents champs.

L’autocomplétion à facette

Pour ce faire, nous allons modifier deux choses. D’abord, il va falloir définir un template de widget spécifique pour afficher le champ recherché. Ensuite, la fonction qui parse le résultat renvoyé par Solr va devoir prendre en compte les différents champs.

$(document).ready(function() {
 
  // Widget autocomplete spécifique
  // cf. http://jqueryui.com/demos/autocomplete/#categories
  $.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
      var self = this,
        currentCategory = "";
      $.each( items, function( index, item ) {
        if ( item.category != currentCategory ) {
          ul.append( "" + item.category + "
" );
          currentCategory = item.category;
        }
        self._renderItem( ul, item );
      });
    }
  });
 
  $('#search').catcomplete({
    source: function(request, response) {
      $.ajax({
        url: 'http://localhost:8983/solr/terms?terms.fl=name&terms.fl=tag_fr',
        dataType: 'jsonp',
        data: {
          wt: 'json',
          'json.nl': 'arrarr',
          'terms.prefix': request.term,
          'terms.sort': 'index',
          'terms.limit': 5,
          omitHeader: 'true'
        },
        jsonp: 'json.wrf',
        success: function(data) {
 
          answer = new Array();
 
          $.each(data.terms, function(facet, terms) {
            answer = answer.concat($.map(terms, function(item) {
              return {
                label: item[0] + ' (' + item[1] + ')',
                value: item[1],
                category: facet
              };
            }));
          });
          response(answer);
        }
      })
    }
  });
});

Notez l’url utilisée dans le widget autocomplete : il y a maintenant deux options « terms.fl », mais il pourrait y en avoir beaucoup plus.

La fonction d’analyse des résultats est un peu plus complexe. Pour chaque champ renvoyé par solr, elle construit un tableau de termes, en y adjoignant la catégorie, c’est à dire le champ courant. Tous les tableaux sont ensuite concaténés, en renvoyés en réponse.

La catégorie est utilisée par le template de rendu du widget, pour être affichée dans le menu d’autocomplétion.

Dans nos styles, il faudra ajouter ceci :

.ui-autocomplete-category {
  font-weight: bold;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 1.5;
}

Et voilà ! Un widget d’autocomplétion un poil moins que basique. Partant de cette base, je vous laisse imaginer les améliorations les plus raffinées. Si vous avez des idées de démo, je suis preneur.

– Edit –

J’ai oublié de mentionner le problème de la sécurité. Bien entendu, c’est une trés mauvaise idée de laisser Solr en accès libre depuis l’extérieur. Donc ou bien vous créez un proxy, ou bien vous créez un requesthandler spécifique en lecture seule. C’est tout.

Créer une liste triable avec Symfony et jquery ui

thibault — Sat, 23 Jan 2010 12:23:57 +0000

Lors de mes développements de ces derniers jours, je suis tombé sur un besoin qui me semblait relativement simple. Je voulais être capable de trier rapidement une liste d’éléments. Et comme, malgré tout, j’ai un peu galéré à trouver des tutoriaux à jour, je vous livre ici le fruit de mes travaux.

J’utiliserai pour ce faire la librairie jquery UI, elle même basée sur Jquery.

Attention, hein, c’est samedi matin, je suis mal réveillé, − edit : tellement mal réveillé que j’ai publié l’article avant de l’avoir terminé. fail… − alors je raccourcirai au maximum. Si je ne suis pas clair, laissez moi des commentaires.

Comme d’hab, commençons par le modèle

Je voulais trouver un outil capable de gérer un backlog de produit à la scrum, histoire de communiquer avec mes clients à distance. Cependant, malgré l’existence d’excellents outils dédiés à cette sympathique méthodologie agile, je n’ai pas réussi à trouver quelque chose de vraiment simple et répondant à mes besoins. Alors, en bon geek, j’ai choisi de coder le mien.

Project:
  actAs:
    Sluggable:
      fields: [ title ]
      unique: true
 
  columns:
    id: { type: integer, primary: true, autoincrement: true }
    title: { type: string(255), notnull: true }
 
Story:
  actAs:
    Timestampable: ~
 
  columns:
    id: { type: integer, primary: true, autoincrement: true }
    project_id: { type: integer, notnull: true }
    description: { type: clob, notnull: true }
    priority: { type: integer(2), default: 0 }
    effort: { type: integer(2), default: 0 }
 
  relations:
    Project:
      foreignAlias: Stories
      local: project_id
      foreign: id
      type: one
      foreignType: many

Pour les paresseux, je vous colle aussi les fixtures :

 
Project:
  demo:
    title: 'Demo project'
 
Story:
  s1:
    description: 'En tant qu''anonyme, je peux m''inscrire sur le site pour devenir membre'
    priority: 1
    effort: 5
    Project: demo
 
  s2:
    description: 'En tant que membre, je dispose d''une page d''accueil pour éditer mon profil et voir l''activité de mon réseau'
    priority: 3
    effort: 13
    Project: demo
 
  s3:
    description: 'En tant que rédacteur, je peux écrire des articles de type magazine et les publier dans des catégories'
    priority: 2
    effort: 25
    Project: demo

Voilà pour le modèle. Je vous laisse construire tout ça, vous connaissez le topo. Créez ensuite un module « project », avec une action « show » qui affichera une liste de users stories. Je vous passe le code de l’action qui n’a rien de spécial. Dans le template « showSuccess.php » du module project, ajoutez :

// bla bla bla

 include_partial('story/list', array('stories' => $project->getStories())) ?>

Vous aurez bien entendu surchargé la fonction « getStories » pour trier les histoires par priorité.

Créez ensuite un module « story », et ajoutez-y un template « _list.php » …

 foreach($stories as $story): ?>
    echo$story->getId()?>">
       include_partial('story/detail', array('story' => $story)) ?>
     endforeach ?>


   


  
    #id
    Description
    Effort

Ainsi qu’un autre template « _detail.php »


  
    
     echo $story->getId() ?>
  

 echo $story->getDescription() ?>
 echo $story->getEffort() ?>

Vous voilà donc avec une belle liste de users stories, affichées par ordre de priorité, et que vous souhaiteriez pouvoir réordonner par drag’n'drop.

Des p’tits tris, des p’tits tris, encore des p’tits tris…

Dans le répertoire web, ajoutez dans votre fichier js maison (créez le s’il n’existe pas) le code suivant.

$(document).ready(function()
{
  $("#stories table tbody").sortable({
    // limitons les déplacements sur l'axe des ordonnées, ce sera plus propre
    axis: 'y',
 
    // Il faut cliquer sur cet élément pour pouvoir initier le drag'n'drop
    handle: '.sort-button',
 
    // Créons un joli trou stylé lors des déplacements
    placeholder: 'ui-state-highlight',
    forcePlaceholderSize: true,
 
    // Cette fonction permet à notre ligne de conserver son formatage lors du déplacement
    // Pas vraiment utile, mais plus agréable à l'œil
    helper: function(e, tr)
    {
      var $originals = tr.children();
      var $helper = tr.clone();
      $helper.children().each(function(index)
      {
        // Set helper cell sizes to match the original sizes
        $(this).width($originals.eq(index).width())
      });
      return $helper;
    },
 
    // La fonction appelée quand un élément change de position
    // C'est le code vraiment utile, en fait
    update: function(event, ui){
      // Construit un tableau des ids des stories
      serial = $(this).sortable('serialize');
 
      // Appelle une action en ajax
      $.ajax({
        url: updateorderurl, // set in layout.php
        type: "post",
        data: serial,
        error: function(){
          alert("Error ! Order not updated");
        }
      })
    }
  });
});

Remarquez que la variable « updateorderurl » contient l’url de l’action qui va réaliser la réaffectation des priorités. Comme cette url est générée par Symfony, elle est définie dans le contrôleur, puis affectée à une variable javascript dans la layout grâce à un slot. Ça vaut ce que ça vaut.

Normalement, vous devriez maintenant être capable de changer l’ordre des stories côté frontend. Bien entendu, le code métier chargé de gérer le réordonnancement n’existe pas encore.

Au cœur du métier

Créons donc une nouvelle action dans le module « story ».

  public function executeUpdateOrder(sfWebRequest $request)
  {
    // Il nous faut un moyen de récupérer le projet en question
    $project = Doctrine::getTable('project')->find($request->getParameter('project_id'));
    $this->forward404Unless($project);
 
    // Correspond à la variable 'serial' dans le js, vous vous souvenez ?
    // C'est un simple tableau d'ids
    $order = $request->getParameter('story');
    $project->updateStoriesOrder($order);
 
    return sfView::HEADER_ONLY;
  }

Nous revoilà repartis dans le modèle. Éditons notre classe Project.

// lib/model/doctrine/Project.class.php
// …
  /**
   * Update the stories order
   *
   * @param array $order An array with the stories ids, sorted by priority
   **/
  public function updateStoriesOrder(array $order)
  {
    foreach($order as $priority => $storyId)
    {
      $story = Doctrine::getTable('story')
        ->find($storyId);
 
      if(!$story || $story->getProjectId() != $this->getId())
        throw new Exception('moo');
 
      $story->setPriority($priority);
      $story->save();
    }
  }

Tadaaaaaam ! Ça devrait fonctionner. Voilà, c’est tout. Tiens, au moment où je finis d’écrire ces lignes, je m’aperçois qu’un plugin censé faire exactement la même chose vient de sortir. Frustration. Bon, tant pis, bon week-end quand même.

Trier un tableau de nombres avec Javascript

thibault — Tue, 17 Jun 2008 09:04:05 +0000

J’adore javascript. Je l’avoue. Malgré sa syntaxe parfois complètement tordue, malgré son mépris total pour le principe de moindre suprise, malgré son niveau élevé sur l’échelle du WTF, ce langage a un petit quelque chose qui me plaît bien. C’est comme pour les personnes, on a les atomes crochus, ou on ne les a pas.

D’ailleurs, dans le genre de surprise qu’on peut avoir en codant, j’ai été joliment étonné en voulant trier un tableau de nombres.

var nombres = new Array(1, 2, 5, 8, 9, 12, 16);
nombres.sort();
alert(nombres);
// Et on obtient :
// 1, 12, 16, 2, 5, 8, 9

Génial ! La fonction sort de l’objet Array tri les éléments par ordre lexicographique (à ne pas confondre avec l’ordre alphabétique) !

Bon, et comment je fais, moi, pour trier mon tableau de nombre par ordre croissant ? Allez, je suis sympa, je vous donne la solution :

function compare(x, y) {
    return x - y;
}
 
var nombres = new Array(1, 2, 5, 8, 9, 12, 16);
nombres.sort(compare);
alert(nombres);
// Et on obtient bien :
// 1, 2, 5, 8, 9, 12, 16
 
// Pour trier par ordre décroissant, on definira autrement la fonction compare :
 
function compare(x, y) {
    return y - x;
}

Tellement simple. Tellement tordu. Tellement inattendu. J’adore. Je dois être un peu sado-maso sur les bords.