Recherche sur Drupal en AJAX

Soumis par bonvga le 1 avril, 2006 - 01:28

Avant de commencer : Cette page explique comment ajouter un champ de recherche autocompleté sur Drupal 4.6 en utilisant la librairie scriptaculous. Pour les nouvelles version de Drupal, j'ai développé un module Search autocomplete.

Voici une méthode pour 'ajaxifier' rapidement et simplement le moteur de recherche intégré à un site drupal. Ci dessous un exemple en image :

exemple de recherche

Installation quick'n'dirty :

scriptaculous :

Commencez par télécharger scriptaculous puis décompactez l'archive dans le répertoire 'misc/' de votre installation de drupal.

modification du template :

Ensuite, sur le template themes/bluemarine_smarty/page.tpl (thème bluemarine_smarty), remplacez les portions de code suivantes :

  {* remplacez cela *}
  {$head}
  {$styles}

  {* --------------------- *}

  {* par ceci *}
  {$head}
  <script src="misc/scriptaculous-js-1.6.0/lib/prototype.js" type="text/javascript"></script>
  <script src="misc/scriptaculous-js-1.6.0/src/effects.js" type="text/javascript"></script>
  <script src="misc/scriptaculous-js-1.6.0/src/controls.js" type="text/javascript"></script>
  {$styles}

et aussi

  {* remplacez cela *}
        <div id="search">
          <input class="form-text" type="text" size="15" value="" name="edit[keys]" alt="{$search_description}" />
          <input class="form-submit" type="submit" value="{$search_button_text}" />
        </div>

  {* --------------------- *}

  {* par ceci *}
        <div id="search">
          <input autocomplete="off" class="form-text" type="text" size="15" value="" id="search_field" name="edit[keys]" alt="{$search_description}" />
<style type="text/css"><!--{literal}
div.auto_complete {
  width: 250px;
  background: #fff;
  text-align: left;
}
div.auto_complete ul {
  border:1px solid #ccc;
  margin:0;
  padding:0;
  width:100%;
  list-style-type:none;
}
div.auto_complete ul li {
  margin:0;
  padding:3px;
}
div.auto_complete ul li.selected {
  background-color: #ccc;
}
div.auto_complete ul strong.highlight {
  color: #ccc;
 margin:0;
  padding:0;
}{/literal}
--></style>
          <div class="auto_complete" id="search_auto_complete"></div>
          <script type="text/javascript">new Ajax.Autocompleter('search_field', 'search_auto_complete', 'ajax_search.php', {ldelim}{rdelim})</script>
          <input class="form-submit" type="submit" value="{$search_button_text}" />
        </div>

La modification du template est quasi similaire selon les thèmes utilisés et le moteur de template utilisé.

coté serveur :

Créer un fichier nommé ajax_search.php sur la racine du site.

include_once 'includes/bootstrap.inc';
include_once 'includes/common.inc' ;

list($q) = explode(" ",trim($_POST["edit"]["keys"]));

if (strlen($q)>1) {
  $result = db_query('SELECT DISTINCT word FROM {search_total} WHERE word LIKE \'%s\' ORDER BY word ASC, count DESC LIMIT 30', $q.'%');
  echo "<ul>";
  while($line = db_fetch_object($result)) {
    echo "<li>".$line->word."</li>";
  }
  echo "</ul>";
}

Et voila, il n'y a plus qu'à tester !

Posté dans les catégories , , , , et

2 commentaires pour “Recherche sur Drupal en AJAX”

Portrait de sami

Le 3 septembre, 2007 - 10:30
sami a écrit

Bonjour,
bravo pour votre truc avec scriptaculous.
Je suis pas dans un forum , mais si ca ne vous dérange pas bien sur.
je suis entrain de d'utiliser scriptaculous et prototype AVEC DRUPAL 5.2.
ca marche pas !!!.
Peut etre il a petit truc a faire .
j'ai déja utilisé scriptaculous( Pas avec drupal bien sur).

Si vous avez deja rencontré ce genre de truc.
je vous demande, si vous permettez, de me dire quoi faire exactement.
Merci d'avance.

Portrait de bonvga

Le 15 octobre, 2007 - 22:06
bonvga a écrit

Je pense qu'il faut plutôt partir sur l'utilisation de jQuery car cette librairie est intégrée à Drupal depuis la version 5.0.

Je vais y réflechir.

Articles similaires

Plaza42 Développeurs

Catégories

Promo

Liens

Archives