Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1002 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Autocompletion AJAX] Moteur de recherche à la google

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Autocompletion AJAX] Moteur de recherche à la google

n°2043599
Soni03
Posté le 21-12-2010 à 18:52:23  profilanswer
 

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

mood
Publicité
Posté le 21-12-2010 à 18:52:23  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Autocompletion AJAX] Moteur de recherche à la google

 

Sujets relatifs
[MySQL] Moteur de base entre Memory et MyIsamRéférencement d'un myspace supprimé par google ?
problème référencement sur googleMacro dans une recherche
Moteur physique/collisions 2D existant?Recherche programmeur pour un programme a filtre négatif
algo / moteur de rechercheRecherche texte + modification dans un fichier
Plus de sujets relatifs à : [Autocompletion AJAX] Moteur de recherche à la google


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR