Voici un plugin jQuery facilitant l’autocompletion : Autocomplete. Il est très simple d’utilisation et il est facilement customisable. Comme d’habitude, rien de mieux qu’un exemple concret d’utilisation pour comprendre. Le fonctionnement de cet exemple est très simple et cumule des notions abordées auparavant. Au chargement de la page, l’ajax interroge un script PHP qui retourne un flux XML contenant plusieurs éléments (pouvant être issus d’une requête SQL). Il ne reste alors plus qu’a appeler la fonction pour déclencher l’autocompletion.

		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.pack.js"></script>
<style type="text/css">
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}

.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}

.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}

.ac_loading {
/*background: white url('indicator.gif') right center no-repeat;*/
}

.ac_odd {
background-color: #eee;
}

.ac_over {
background-color: #0A246A;
color: white;
}
</style>

<script type="text/javascript">

// Lorsque la totalité de la page est chargée

$(document).ready(function() {

$.ajax({ // Requete ajax

type: "POST", // envoie en POST
url: "test.php", // url cible du script PHP
async: true, // mode asynchrone
data: "", // données envoyées

success: function(xml){ // Lorsque le PHP à renovyé une réponse
var elementsArray = new Array();

$(xml).find('element').each(function(){ // pour chaque "element"
elementsArray.push($(this).text()); // ajout dans le tableau
});

$("#example").autocomplete(elementsArray); // activation de l'autocompletion
}

});

});

</script>

</head>
<body>
Autocompletion : <input id="example" />
</body>
</html>

header ("content-type: text/xml");
echo "
<root>
<element>element 1</element>
<element>element 2</element>
<element>element 3</element>
<element>element 4</element>
<element>element 5</element>
<element>element 6</element>
<element>element 7</element>
<element>element 8</element>
<element>element 9</element>
<element>element 10</element>
<element>element 11</element>
</root>";

Tout ca pour donner :

Partager sur :
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Twitter

Article(s) sur le même sujet :

  1. Appels ajax avec jQuery
  2. Lecteur tous formats en flash
  3. Google Maps API en PHP