Autocomplete jQuery UI avec source externe

Autocomplete jQuery UI avec source externe - HTML/CSS - Programmation

Marsh Posté le 20-07-2011 à 17:11:00    

Hello,  
 
J'aimerais utiliser la widget autocomplete de jqueryui avec une source externe, donc un accès à ma DB qui doit rechercher environ 4000 entrées.
 
D'abord ce que j'ai compris, je dois :
 
- créer un script php qui va rechercher les entrées dans la DB Mysql et afficher le tout en format JSON
- avec le script autocomplete, aller chercher ce script comme source
 
 
C'est bien ça ?  
 
J'ai donc un fichier groupes.php qui manifestement crée bien un tableau en JSON :  
 

Code :
  1. ["","#1 defender","(1) Kilo Of Black Bondage","(the) Silent Days","+\\- ( Plus\\Minus)","100 demons","1000 Travels Of Jawaharlal","108","12 Hour Turn","12XU","13 & God","13K","14weeks","16","16 Kat","16theday","1905","1969 Was Fine!","2 Fatties & The Bloody Beerbois","25","25 Ta Life","2nd District","3 INCHES OF BLOOD","3 Lost Maniacs","3 Seconds Of Air","31Knots","37 Stabwoundz","400Colpi","50 lions","5pack","64 Dollar Question","65daysofstatic","6Noir","7 generations","7 Seconds","7 Weeks","7EVENPM","8 UNEVEN","86 Mentality","86it","8aven","8control","95-C","A Case Of Grenada","A darker manifest","A day in black and white","A Day To Remember","A fear called treason","A Fine Boat That Coffin","A Flower Kollapsed","A Life Once Lost","A Lost Fear","A Modern Day Tragedy","A Perfect Mess","A Place To Bury Strangers","A School Of Quiet","A Static Lullaby","A storm of light","A thousand years slavery","A Traitor Like Judas","A Wilhelm Scream","A.M. Thawn","A.N.S.","A.S.T.R.O.","Aaron O'Neill","Abandon All Ships","Abject","Abney Park","Aborted","Absent","Absinthe (Provisoire)","Absurdity","Abysmal Dawn","Abysse","AC\/DC","Accalmie","Accept","Achilles","Acid China X","Acid Mothers Temple","Acid Tiger","Across Tundras","Actarus","Action","Action Beat","Actions Fall Short","Ad Arma","Ada Nuki","Adam Haworth Stephens","Adam Kesher","Adam West","Adequate 7","Admiral Freebee","Adolina","Adorno","Adrian Bouldt","Aenima","Aesthesia","AFI","Afraid!","After Blowdown","After Taste","Against Me !","Agaskodo Teliverek","Agatha","Age of compress","Age Of Torment","Agenda of swine","Agents of Abhorrence","Aghast","Aghostino","Agnostic Front","Agonia","Agonoize","Agoraphobic Nosebleed","Aguirre","AHELLAGOODBANDNAME","Aidan Baker","Aiden","Aids Wolf","Airbourne","Airlock","Airpeople","Airport City Express","Akimbo","Akro","Akron\/Family","Aktarum","Al Amor De La Lumbre","Al And The Black Cats","Alabama Thunderpussy","Alain Weber","Alchemik Babylon Beats","Alec Empire","Alek et Les Japonaises","Alexisonfire","Algernon","Algernon Cadwallader","Ali Harter","Alice In Chains","Alkaline Trio","Alkalys","Alkerdeel","All Else Failed","All For Nothing","All my sins","All Of Them","All Out War","All Parallels","All Pigs Must Die","All Shall Perish","All System Go!","All That Remains","All will suffer","Allegiance","Allocation","Almandino Quite Deluxe","Almond's Drive","Alpha & Omega","Alpha 2.1","Alpha and Omega","Alpinist","Alps Of New South Wales","Altars","Altars Of Destruction","Alternine","Al'tarba","Am I Dead Yet !","Amadeus","Amalthea","Amanda Rogers","Amanda woodward","Amber Daybreak","Amber Pacific","Ambitions","Ambush","Amebix",null,"Amen Ra","American Dog","Amity","Amon Amarth","Amon Tobin","Amorphis","Amort","Ampere","Ampools","Amsha","aMute","An Albatross","An Orange Car Crashed",null,"Anacharsis","Anal Cunt","Analena","Ananda","Anchor","Anchors For Arms","Ancient Sky","Ancient Vvisdom","And Say We Did","And So I Watch You From Afar","And You Will Know Us By The Trail Of Dead",null,"Andrew W.K.","Andromakers","Andy McKee","Andy Moor","Anemone","Anevilforeachman","Angel","Angel Crew","Angel Eyes","Angels Of Light","Angra","Angry Samoans","Angstzustand","Anima","ANIMOSITY","Anja Garbarek","Annita Babyface And The Tasty Poneys","Annotations Of An Autopsy"]


 
Bon j'ai enlevé une grosse partie parce que 4000 ça fait beaucoup.
 
Ca se trouve ici : http://www.shootmeagain.com/groupes.php
 
Ensuite le script autocomplete entre en jeu pour aller chercher ces données.  
 
Voici le bout de code en questions :  
 

Code :
  1. <div CLASS='txt' align='left'>
  2. <script> $(function() {  $( "#tags" ).autocomplete({    source: "groupes.php",    minLength: 2,  }   });  });</script>
  3. <label for='tags'>Tags: </label><input id='tags'></div>

 
 
Bien sûr les différentes sources .js ont été appelées.
 
Par contre, ça ne fonctionne pas comme vous pouvez le voir ici : http://www.shootmeagain.com/index. [...] tocomplete
 
Quelqu'un verrait comme ça ce que j'ai pu rater et qui fait que ça ne fonctionne pas ? :??:
 
Merci 1000x d'avance de votre aide !


---------------
SHOOT ME AGAIN WEBZINE
Reply

Marsh Posté le 20-07-2011 à 17:11:00   

Reply

Marsh Posté le 20-07-2011 à 17:49:35    

Essaye de passer une url complete (avec le http et tout) dans ton source et ca devrait aller mieux.
Essaye aussi avec un tableau json plus petit (si ton prog est bugge et qu'un des labels contient un " non escape, ca risque de foirer aussi.
Good luck.
Fred

Reply

Marsh Posté le 20-07-2011 à 18:12:40    

Remarque judicieuse, je l'ai suivie mais pas de changement malheureusement.
 
URL complète :  
 

Code :
  1. <div CLASS='txt' align='left'>
  2. <script> $(function() {  $( "#tags" ).autocomplete({    source: "http://www.shootmeagain.com/groupes.php",    minLength: 2  }   });  });</script><label for='tags'>Tags: </label><input id='tags'></div>
  3. </div>


 
Et pour mon tableau je n'ai pris que ce qui commence par "AM"  
 

Code :
  1. ["Am I Dead Yet !","Amadeus","Amalthea","Amanda Rogers","Amanda woodward","Amber Daybreak","Amber Pacific","Ambitions","Ambush","Amebix",null,"Amen Ra","American Dog","Amity","Amon Amarth","Amon Tobin","Amorphis","Amort","Ampere","Ampools","Amsha","aMute"]


---------------
SHOOT ME AGAIN WEBZINE
Reply

Marsh Posté le 20-07-2011 à 20:27:50    

De memoire, autocomplete ne recoit pas du json, mais plutot un fichier avec un entree par ligne


---------------

Reply

Marsh Posté le 20-07-2011 à 21:08:20    

J'avance peu à peu :)  
 
Après vérification ça fonctionne bien avec JSON mais le souci que j'ai maintenant, c'est qu'il ne tient pas compte de ce que je rentre dans mon INPUT pour faire ses propositions, il me sort toute la liste.
 
J'ai dans mon groupes.php tous les artistes qui commencent par B et quand je tape A ou n'importe quelle autre lettre il me sort toujours la même liste... :??:  
 
http://www.shootmeagain.com/index. [...] tocomplete  
 
C'est dans ma requête mysql que je dois spécifier un LIKE nom='qqch%' ? :??:  
 
Je ne passe aucun argument vers mon groupe.php pourtant...


---------------
SHOOT ME AGAIN WEBZINE
Reply

Marsh Posté le 20-07-2011 à 21:58:37    

Au fait, ce qui coinçait un peu avant c'était les caractères accentués, tout ça c'est une histoire de charset. M'en occuperai plus tard, là j'ai juste supprimé tous les accents lors de l'extract dans ma DB.  
 
Bon, d'après les tutos effectivement la requête se fait dynamiquement par rapport à ce qu'on entre dans l'INPUT. Ce qui me fait poser 2 questions :  
 
- C'est pas un peu gourmand de faire une requête à chaque fois que l'utilisateur tape une lettre ou presque ? Ce ne serait pas plus light de charger toute la liste et de filtrer dans un array ?  
 
Comment passe l'argument, bon sang de bonsoir ? :o  
 
D'après les tutos, ça se passe comme ceci :  
 

Code :
  1. <?php
  2. $host="192.168.10.13"; // Host name
  3. $username="root"; // Mysql username
  4. $password="root"; // Mysql password
  5. $db_name="ankdb"; // Database name
  7. $con = mysql_connect($host,$username,$password) or die(mysql_error());
  8. mysql_select_db($db_name, $con) or die(mysql_error());
  10. $q = strtolower($_GET["q"]);
  11. if (!$q) return;
  13. $sql = "select DISTINCT course_name as course_name from course where course_name LIKE '%$q%'";
  14. $rsd = mysql_query($sql);
  15. while($rs = mysql_fetch_array($rsd)) {
  16. $cname = $rs['course_name'];
  17. echo "$cname\n";
  18. }
  19. ?>


 
Donc ça vient d'un ($_GET["q"]) donc dans le formulaire doit y avoir un "q" quelque part non ?
 
Parce que j'en vois pas...  
 

Code :
  1. <form autocomplete="off">
  2. <p>
  3. Enter Language Name <label>:</label>
  4. <input type="text" name="course" id="course" />
  5. </p>
  6. <input type="submit" value="Submit" />
  7. </form>


 
 
Quelqu'un peut m'éclairer sur ce point ? :??:

Reply

Marsh Posté le 21-07-2011 à 09:03:51    

Est-ce que quelqu'un a au moins un jour réussi à faire fonctionner ce widget avec une source mysql ? Je deviens dingue, ça fait 2 heures que je cherche et rien ne fonctionne ! :sweat:

Reply

Marsh Posté le 21-07-2011 à 10:08:35    

Non, ce que tu tapes est fourni a ton autocomplete par le script jQuery.  
Ceci est recupere dans une variable qui s'appele normalement 'term' cote php (si tu utilise la meme version que moi).
Si ca te rassure, j'ai mis pas mal de temps a le faire fonctionner en .net...

Message cité 1 fois
Reply

Marsh Posté le 21-07-2011 à 10:59:27    

Ca me rassure pas ! :D
 
Merci !

Reply

Marsh Posté le 21-07-2011 à 15:41:35    

fred777888999 a écrit :

Non, ce que tu tapes est fourni a ton autocomplete par le script jQuery.  
Ceci est recupere dans une variable qui s'appele normalement 'term' cote php (si tu utilise la meme version que moi).
Si ca te rassure, j'ai mis pas mal de temps a le faire fonctionner en .net...


 
 
T'es un Dieu mec, je t'aime !   :love:  
 
http://www.shootmeagain.com/index. [...] tocomplete
 


---------------
SHOOT ME AGAIN WEBZINE
Reply

Marsh Posté le 21-07-2011 à 15:41:35   

Reply

Marsh Posté le 21-07-2011 à 15:45:56    

lol, felicitations, tu as mis moins de temps que moi :)
Essaye quand meme de poster ton source, ca aidera surement ceux qui repasseront par la un jour :)

Reply

Marsh Posté le 21-07-2011 à 16:13:49    

Of course, j'étais trop occupé à l'implémenter dans mon code :D  
 
 
 
Alors le script qui va faire la requête :  
 

Code :
  1. $term=$_GET['term'];
  3. $req=$bd->req_exe("select bandname from groupe where bandname like '$term%' order by bandname" );
  4. $i=0;
  5. while ($datagroupes=$bd->objetSuiv($req))
  6. {
  7.  $groupes[$i] = no_accent(stripslashes($datagroupes->bandname));
  8.  $i++;
  9. }
  10. $groupes=json_encode($groupes);
  11. echo $groupes;


 
2/3 trucs importants :  
 
- $_GET['term'] (merci fred) c'est par là que passe le texte entré dans l'input, donc il faut qu'il soit dans la requête
- Un petit json_encode à la fin
- Les accents passent mal, même en jouant avec les charset. Alors le plus simple si on peut se passer des accents, utiliser un script qui les supprime, comme ça :  
 

Code :
  1. function no_accent($str_accent) {
  2.    $pattern = Array("/æ/", "/é/", "/è/", "/ê/", "/ë/", "/€/", "/ç/", "/Ç/", "/à/", "/â/", "/ä/", "/î/", "/ï/", "/í/", "/µ/", "/ù/", "/ü/", "/û/", "/Ó/", "/ô/", "/ö/", "/õ/", "/ø/", "/Ø/", "/ò/", "/ý/", "/ÿ/", "/ž/", "/’/" );
  3.  $rep_pat = Array("ae", "e", "e", "e", "e", "e", "c", "C", "a", "a", "a", "i", "i", "i", "u", "u", "u", "u", "o", "o", "o", "o", "o", "o", "o", "y", "y", "z","" );
  4.    $str_noacc = preg_replace($pattern, $rep_pat, $str_accent);
  5.    return $str_noacc;
  6. }


 
Enfin, j'ai vu dans tous les tutos des trucs hyper complexes et poussés mais si on a besoin juste de la fonction basique, 2/3 lignes comme ça suffisent :  
 

Code :
  1. echo '<script> $(function() {  $( "#tags" ).autocomplete({    source: "'.PATH.'/groupes.php",    minLength: 2 });  });</script>';
  2.  echo "<label for='tags'>Tags: </label>";
  3.  echo "<input id='tags'>";


 
Voilà, en espérant que ça puisse aider d'autres personnes. N'hésitez pas à me demander mais comme vous le voyez dans ce topic je suis surement moins doué que vous :D


Message édité par Dawa le 21-07-2011 à 16:14:27

---------------
SHOOT ME AGAIN WEBZINE
Reply

Marsh Posté le 21-07-2011 à 17:35:01    

Pas mal.  
Attention tout de meme, ta moulinette qui transforme le nom du groupe (accents, ç, ...) va t'obliger a ensuite modifier ta recherche une fois que les données ont été saisies par l'utilisateur/autocomplete.

Reply

Marsh Posté le 21-07-2011 à 21:04:47    

C'est tout-à-fait vrai. En fait, suffirait de passer le 'term' par la même moulinette !

Reply

Sujets relatifs:

Leave a Replay

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