Top-News > Informatique > Recherche Auto Complétée AJAX Exemple

Recherche Auto Complétée AJAX Exemple

recherche auto completee

Voici un exemple de Recherche Auto Complétée en AJAX . ( pâle imitation de la suggestion de google )
Pour réaliser ce champ de recherche j' ai décidé de ne pas utiliser de librairies javascript . Mon point de départ a donc été une fonction qui permet de créer une requête ajax ( standard ).
La recherche s' effectue ici sur le titre des billets du blog , il est donc tout à fait possible de l' intégrer dans un thème wordpress ( voir précision plus loin ) .

Avant de débuter la lecture , voici le résultat final : http://top-news.fr/demos/autocomplete/ .

Pour télécharger les sources : http://top-news.fr/demos/autocomplete/ajaxAutoComplete.rar ( le code est un peu beaucoup illisible sur cette page ) . J' ai mis en commentaire dans le fichier php un tableau pour tester sans wordpress .

LE CODE

Le " système " se compose de deux fichiers : la page html contenant le formulaire ( j' ai inclus le javascript et le css il faudrait les déclarer dans des fichiers js et css ) et d' une page php traitant la requête envoyée .

<?php
header('Content-Type: text/html; charset=utf-8');
?>
<html>
<head>
<title>champ auto complété ajax</title>
<script>
function creerAjaxRequete() { // adaptation de https://developer.mozilla.org/fr/AJAX/Premiers_pas

var texteCherche = document.forms['completeAuto'].rechercheID.value;
var url = 'http://top-news.fr/demos/autocomplete/ajaxAutoComplete2.php';
var httpRequest = false;

if (window.XMLHttpRequest) { // Mozilla, Safari,...
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}

if (!httpRequest) {
alert('Abandon Impossible de créer une instance XMLHTTP');
return false;
}

var params = 'variable='+texteCherche;
httpRequest.open("POST", url, true);
//Send the proper header information along with the request
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.setRequestHeader("Content-length", params.length);
httpRequest.setRequestHeader("Connection", "close");

httpRequest.onreadystatechange = function() {//Call a function when the state changes.
if(httpRequest.readyState == 4 && httpRequest.status == 200) {
changeDiv(httpRequest.responseText);
}
}

httpRequest.send(params);

}

function changeDiv(texte) {
document.getElementById('conteneur').innerHTML = texte;
}

function effaceDiv()
{
document.getElementById('conteneur').innerHTML = '';
}

</script>
<style>
form{padding:10px;background:#EFEFEF;}
input{
width:250px;
margin:0px;
}
#conteneur{
position:relative;
}
.infoBulle{
background:#FFFFDF;
display:block;
width:250px;
margin:0;
height:200px;
overflow-y:scroll;
overflow-x:none;
position:absolute;
top:0px;
}
.infoBulle a{
color:blue;
text-decoration:none;text-underline:none;
}
ul{
display:inline;
list-style:none;
margin:0px;
padding:0px;
}
li{
display:block;
list-style:none;
padding:4px;
border-bottom:1px solid grey;
}
li:nth-child(even) {background-color:#FFFFDF} /*lignes paires */
li:nth-child(odd) {background-color:#FEFF9F} /*lignes impaires */
</style>
</head>
<body onclick="effaceDiv()">
<h1>Champ de Recherche Auto Complété en AJAX</h1>
<form name="completeAuto">
<input name="MaRecherche" id="rechercheID" value="" onkeyup="creerAjaxRequete()" onclick="creerAjaxRequete()"/> <small>le champ recherche dans les titres des billets du blog ( limité à 1000 billets ).</small>
<div id="conteneur">
</div>
</form>

<p>le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page</p>
<p>le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page</p>
<p>le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page</p>
<p>le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page</p>
<p>le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page</p>
<p>le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page</p>
<p>le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page le texte de ma page</p>

</body>
</html>

Je ne reviendrai pas ici sur la requête ajax , de nombreux sites vous proposent des tutoriels très complets où les explications sont beaucoup plus pertinentes que les miennes .
La méthode POST pour envoyer les données évite pas mal de soucis et notamment des problèmes d' encodage des caractères .

Voici le fichier php appelé par la fonction creerAjaxRequete . Si vous souhaitez intégrer cette recherche dans votre thème , il est conseillé d' utiliser la classe wpdb de wordpress .

<?php
header('Content-type: text/html; charset=UTF-8');
/* on récupère le texte entré dans le champ de recherche */
$recherche = addslashes($_POST['variable']);

/* je me connecte à la table des billets de mon blog */

$db = mysql_connect('localhost', 'LOGIN', 'MOTdePASSE');
mysql_select_db('NOMdeLaBASE',$db);

/* on sélectionne les billets dont le titre ressemble à la recherche */

$sql = "SELECT post_title,post_name FROM wp_posts WHERE post_title LIKE '%$recherche%' AND post_status = 'publish' ";

mysql_query("SET NAMES 'utf8'");

$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

/* on construit un tableau avec les titres et les url des billets trouvés */

$tableau = array();
$i = 0;

while($data = mysql_fetch_assoc($req))
{
$tableau[$i][0] = $data['post_title'];
$tableau[$i][1] = $data['post_name'];
$i++;
}

/* des variables */

$rechercheLongueur = strlen($recherche);

$nombreDeReponse = 0 ;