Drupal - Search autocomplete
Ce module permet d'ajouter aux champs de recherche d'un site Drupal la fonctionnalité d'autocomplétion. En cours de frappe, le champ va s'étendre et proposer une liste de résultats avant de lancer la recherche.
Voici une démonstration du module :
Vous pouvez aussi tester le fonctionnement du module en essayant une recherche avec le formulaire en haut à droite.
Voici un aperçu du panneau de configuration du module :
Depuis ce panneau de configuration on peut :
- choisir les champs ou il faut activer le module : champ de recherche classique ou la boite de recherche ou les deux.
- choisir une méthode de recherche : par ordre naturel, alphabétique, score ou pertinence.
- choisir le nombre maximal de resultats de la recherche ainsi que le nombre minimum de caractères à saisir pour déclencher le module.
- tester les paramètres de configuration du module.
Pour télécharger ce module ou soumettre un bug, rendez-vous sur la page du projet sur le site Drupal.org.
Administration du module search autocomplete
Recherche sur Drupal en AJAX
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 :
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.
<?php
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 !