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 !
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.
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.
