Gularu.fr

• Tweet

Je cherchais un plugin wordpress pour afficher les titres ou même les champs personnalisés de mes articles directement sur un champ input d’un formulaire présent en sidebar de l’un de mes wordpress, le tout en ajax en autocomplétion !

J’ai donc trouvé la perle rare qui permet de le faire : Quick search.

Ce plugin wordpress de recherche ajax, disponible ici, permet donc de spécifier l’id du champ input dont vous voulez faire apparaître l’autocomplétion et la liste en ajax de vos articles. Après, il vous suffit de modifier un peu le fichier quick-search.js pour éviter la mise en forme automatique du champ input et ne faire coïncider qu’un seul champ. J’ai modifié ces lignes :

jQuery(document).ready(function()
{
var quick_search_form     = jQuery("#" + quick_search_settings.form_id);
var quick_search_input     = jQuery("#searchInput"); // Ici j'ai modifié cette ligne en spécifiant le seul champ input que je voulais voir concerné
...

Ensuite, dans le fichier search.php, vous pouvez modifier les lignes pour changer les résultats qui apparaîtront. Par exemple moi je ne voulais que ce soit seulement les articles qui apparaissent, j’ai donc mis en commentaire les parties pages et commentaires. Ensuite, j’ai un champ personnalisé qui est plus lisible que mes titres, j’ai donc modifié les lignes pour faire apparaître mon champ personnalisé à la place du titre :

if (count($posts))
{
 
	$noResult = true;
	foreach($posts as $post)
	{
		$titre = get_post_meta($post->ID, "titre", true);
		$visible = get_post_meta($post->ID, "visible", true);
		if ($visible == "oui" && $titre != "") {
			$result .= '<li>';
			$result .= '<a href="#" id="item_'.$post->ID.'">';
			$result .= '<strong>' . $titre . '</strong><br />';
			//$result .= '<span>' . substr(strip_tags($post->post_content), 0, $maxchars) . '...</span>';
			$result .= '</a>';
			$result .= '
			<script type="text/javascript">
				jQuery("#item_'.$post->ID.'").click(function() {
					jQuery("#searchInput").val("' . $titre . '");
					var quick_search_popup = jQuery("#quick_search_result");
					jQuery(quick_search_popup).css("display", "none");
					return false;
				});
			</script>';
			$result .= '</li>';
			$noResult = false;
		}
	}
	if ($noResult) $result .= '<li>' . __("Aucun r&eacute;sultat") . '</li>';
}

Je ne voulais pas de rechargement de page, j’ai donc rajouté un peu de jQuery afin d’empêcher le rechargement de la page au clic et remplir le champ input par le titre trouvé. C’est pour cela que l’on trouve un # dans le lien et que j’ai rajouté un id « item_X ».
En dessous, il y a donc le code javascript.

Voilà j’espère que ces quelques lignes vous aideront à avancer sur vos propres projets.