[Autocompletion AJAX] Moteur de recherche à la google

Moteur de recherche à la google [Autocompletion AJAX] - HTML/CSS - Programmation

Marsh Posté le 21-12-2010 à 18:52:23    

Bonjour,
 
Je voudrais créer un moteur de recherche du type google pour mon application php (site php), pour cela j'utilise l'autocomplétion en Ajax.
 
Je voudrais donc faire de l'autocompletion à l'aide de requête query en pdo, sachant que je ne suis pas du tout un expert en Ajax, ni en Javascript...
 
Je voudrais faire une recherche sur une base de donnée, avec une table patient, qui est constitué ainsi:
 

Code :
  1. CREATE TABLE  "PATIENT"
  2.    ( "IDP" NVARCHAR2(20) NOT NULL ENABLE,
  3. "NOM" NVARCHAR2(50) NOT NULL ENABLE,
  4. "PRENOM" NVARCHAR2(20) NOT NULL ENABLE,
  5. "NUMEROSECU" NVARCHAR2(20) NOT NULL ENABLE,
  6.    )


 
 
Pour cela j'ai crée une page: fonction_recherche.php, avec le code suivant:
 

Code :
  1. <?php
  2. session_start();
  4. if(!isset($_SESSION['identifiant'])) header("Location:index.php" ); // On refuse l'acces si la personne n'est pas connectée.
  5. ?>
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  8. <html xmlns="http://www.w3.org/1999/xhtml">
  9. <head>
  10. <title>Une autocompletion avancée en AJAX</title>
  11. <script type="text/javascript" src="lib/prototype.js"></script>
  12. <script type="text/javascript" src="lib/scriptaculous.js"></script>
  13. <script type="text/javascript" src="lib/autocompletion.js"></script>
  14. <style type="text/css">
  15. body{
  16. font-family: Verdana, Arial, Helvetica, sans-serif;
  17. text-align: justify;
  18. font-size: 12px;
  19. color: #565656;
  20. }
  22. img {
  23.     border: none;
  24. }
  26. ul {
  27. list-style: none;
  28. margin: 0;
  29. padding: 0;
  30. }
  31. /* Autocompletion */
  32. .update{
  33. position:absolute;
  34. width:250px;
  35. background-color:white;
  36. border:1px solid #888;
  37. margin:0px;
  38. padding:0px;
  39. }
  41. ul.contacts  {
  42. list-style-type: none;
  43. margin:0px;
  44. padding:0px;
  45. text-align: left;
  46. }
  47. ul.contacts li.selected { background-color: #ffb; cursor: pointer; }
  48. li.contact {
  49. list-style-type: none;
  50. display:block;
  51. margin:0;
  52. padding:2px;
  53. height:32px;
  54. }
  55. li.contact div.image {
  56. float:left;
  57. width:32px;
  58. height:32px;
  59. margin-right:8px;
  60. }
  61. li.contact div.nom {
  62. font-weight:bold;
  63. font-size:12px;
  64. line-height:1.2em;
  65. }
  66. </style>
  67. </head>
  68. <body>
  71. <?php
  72. if(isset($_POST['chef'])){
  73.  header('Content-type: text/html; charset=iso-8859-1');
  74.  // on inclut la connexion
  75.  include("bdd.php" );
  77.  $i = 0;
  78.  echo '<ul class="contacts">';
  79.  // on boucle sur tous les éléments
  81. /**************************************************** MON AFFICHAGE DE L'AUTOCOMPLETION *******************************************************************************/
  82.  // on fait la requête
  83.  $req = $connexion->query("SELECT * FROM patient WHERE nom LIKE '".$_POST['chef']."%' or prenom LIKE '".$_POST['chef']."%'" );
  84.  while ($autoCompletion = $req->fetch())
  85.  {
  87.   echo '
  88.   <li class="contact"><div class="nom">'.$autoCompletion['NOM'].'</div>
  89.   <div class="prenom">
  90.   <span class="informal">'.$autoCompletion['PRENOM'].'</span>
  91.   </div>
  92.   </li>';
  93.   // on s'arrête s’il y en a trop
  94.   if (++$i >= 10)
  95.    die('<li>...</li></ul>');
  96.  }
  97.  echo '</ul>';
  98.  die();
  99. }
  100. /****************************************************MON AFFICHAGE DE L'AUTOCOMPLETION *******************************************************************************/
  101. ?>
  102. <br/>
  103. <form action="?" method="post" onsubmit="return false;">
  104. <label for="chef">Chef : </label>
  105. <input type="input" name="chef" id="chef" value="" />
  106. <div class="update" id="chef_update"></div>
  107. <input type="hidden" name="chef_id" id="chef_id" value="" />
  108. </form>
  109. <br/>
  110. Numéro de la personne avec son nom : <span id="chef_log"></span>
  112. <script type="text/javascript">
  113. new Ajax.Autocompleter ('chef',
  114.      'chef_update',
  115.      'fonction_recherche.php',
  116.      {
  117.       method: 'post',
  118.       paramName: 'chef',
  119.       afterUpdateElement: ac_return
  120.      });
  121. </script>
  123. </body>
  124. </html>


 
 
L'affichage du tableau de patient fonctionne correctement (avec les requêtes query en pdo), mais l'autocompletion ne fonctionne pas et je ne comprends pas pourquoi...
 
 
Sachant que dans cette page j'utilise les scripts:
http://www.j0k3r.net/exemples/ajax [...] pletion.js
http://www.j0k3r.net/exemples/ajax [...] aculous.js
http://www.j0k3r.net/exemples/ajax/lib/prototype.js
 
Et je m'aide du tutoriel présent sur ce site:  
http://www.j0k3r.net/article/ajax- [...] ee-en-ajax
 
 
Si quelqu'un serait capable de me mettre dans la bonne voie.
 
Merci d'avance pour vos réponses et pour votre aide.

Reply

Marsh Posté le 21-12-2010 à 18:52:23   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed