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 :
Commencez par télécharger scriptaculous puis décompactez l'archive dans le répertoire 'misc/' de votre installation de drupal.
Ensuite, sur le template themes/bluemarine_smarty/page.tpl (thème bluemarine_smarty), remplacez les portions de code suivantes :
RSS {* 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é.
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 !
