Le blog du pangolin

Accueil > Programmation > javascript > Le composant autocomplete de jQuery UI

Le composant autocomplete de jQuery UI

mardi 19 juillet 2011, par Super Pangolin

De quoi avons nous besoin ?
D’une librairie jquery, de jquery-ui et d’une base de données avec une liste (par exemple, les articles de ce blog).

Voici le code javascript

$("#article").autocomplete({
       source: "chercheArticle.php",
       minLength: 2,
       select: function( event, ui ) {
           alert( ui.item ?
               "Selected: " + ui.item.value + " aka " + ui.item.id :
               "Nothing selected, input was " + this.value );
           
       }
   });

Explications :

$("#article").autocomplete

initialise l’auto-complétion pour l’input d’id article.

source: "chercheArticle.php"

Script qui renvoie la liste des données trouvées

minLength: 2

Permet d’attendre d’avoir deux caractères avant de lancer la recherche.

select: function( event, ui ) {
traitement
}

Le traitement à effectuer quand la sélection a été faite.
Voici le code source de notre chercheArticle.php :

$requete = "select id_article, titre as value from spip3_articles where titre like '%{$_GET["term"]}%'";
/* Ensuite le code qui permet d'exécuter la requête et de créer un tableau de résultat $result */
echo json_encode($result);

Le passage de la valeur cherchée se fait par la variable $_GET[’term’].
On exécute le traitement à partir de la donnée passée (par exemple, une lecture de la base) et on renvoie un tableau json dont au moins une donnée a pour nom ’value’.

Démo :

Voici le code complet de cet exemple.

D’abord, les inclusions et l’initialisation dans le header du html :

  1. <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
  2.  
  3. <script type="text/javascript" src="js/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
  4. <p><link rel="stylesheet" href="/js/jquery-ui-1.8.13.custom/css/ui-lightness/jquery-ui-1.8.13.custom.css" type="text/css"></p>
  5.  
  6. <script type="text/javascript">
  7. /*Initialisation du code à la fin du chargement de la page */
  8. $(document).ready(function(){
  9. /* L'id de l'input est "article" */
  10. $("#article").autocomplete({
  11.          /* Script PHP de la"source de donnée" */
  12.         source: "../ajax/chercheArticle.php",
  13.          /* On veut attendre d'avoir 2 caractères avant de lancer le traitement */
  14.         minLength: 2,
  15.         /* Traitement lancé à la sélection d'un item */
  16.         select: function( event, ui ) {
  17.             alert( ui.item ?
  18.                 "Vous avez sélectionné: " + ui.item.value + ". C'est l'article numéro " + ui.item.id_article :
  19.                 "Vous n'avez rien sélectionné, vous aviez tapé " + this.value );
  20.            
  21.         }
  22.     });
  23. });
  24.  

Télécharger

Et voici le code de l’appel ajax à la recherche php :

  1. <?php
  2. /* Une classe on ne peut plus simple de requêtage mySQL */
  3. include_once 'base_mysql.class.php';
  4. /* Mes paramètres de connexion */
  5. include_once 'config.php';
  6. /* Librairie d'encodage en json (car chez free, le json n'est pas activé) */
  7. include_once '../include/jsonwrapper/jsonwrapper.php';
  8.  
  9. /* Connexion à la base */
  10. $oBase_l = new base_mysql(SERVEUR, BASE, LOGIN, PASSWD);
  11.  
  12. /* Requête de recherche. $_GET['term'] contient l'expression à rechercher. */
  13. $sReq_l = "select a.titre as value, a.* from spip3_articles a
  14. where a.titre like '%{$_GET['term']}%'";
  15.  
  16. $sReq_l.="\n order by a.titre";
  17.  
  18. /* On lance la requête */
  19. $oBase_l->query($sReq_l);
  20. /* On en fait un tableau */
  21. $tArticles_l = $oBase_l->tableauPHP();
  22. /* On balance le résultat en json */
  23. echo json_encode($tArticles_l);

Télécharger

La classe mysql :

  1. <?php
  2. class base_mysql{
  3.         var $serveur;
  4.         var $base;
  5.         var $login;
  6.         var $passwd;
  7.         var $requete;
  8.         var $ressource;
  9.        
  10.         function __construct($serveur = null, $base = null, $login = null, $passwd = null){
  11.         if($serveur != null && $base != null && $login != null && $passwd != null){
  12.                 $this->setConnexion($serveur, $base, $login, $passwd);
  13.                 $this->connect();
  14.                 }
  15.         }
  16.        
  17.         function connect(){
  18.                 $this->ressource = mysql_pconnect($this->serveur, $this->login, $this->passwd);
  19.                 mysql_select_db($this->base);
  20.         }
  21.        
  22.         function setConnexion($serveur, $base, $login, $passwd){
  23.                 $this->serveur = $serveur;
  24.                 $this->base = $base;
  25.                 $this->login = $login;
  26.                 $this->passwd = $passwd;
  27.         }
  28.        
  29.         function query($sReq_p){
  30.                 $this->requete = $sReq_p;
  31.                 $this->oRes_i = mysql_query($sReq_p);
  32.         }
  33.        
  34.         function tableauPHP(){
  35.             if($this->oRes_i){
  36.                 $this->tResult_i = null;
  37.                 while($row = mysql_fetch_assoc($this->oRes_i)){
  38.                         $this->tResult_i[] = $row;
  39.                 }
  40.                 return $this->tResult_i;
  41.             }else{
  42.                 return array();
  43.             }
  44.         }
  45. }

Télécharger

Messages

Un message, un commentaire ?

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.

Programmation

Dans la même rubrique

2008 - 2024 Le blog du pangolin
Plan du site | | Contact | RSS 2.0

SPIP