Forum d'entraide PHPFrance

Bonjour,

Je suis coincé dans un développement php, j'aimerais ajouter un champs d'autocomplétions dans un formulaire mais sans succès...

Dans ma page PHP, j'ai un champ qui doit pouvoir s'autocompléter:

<input id = "autocomplete-5">
<div id="empty-message"></div>

Pour l'autocompléter j'utilise le script suivant:

<script>
         $(function() {
            $( "#autocomplete-5" ).autocomplete({
                 source: "nom.php",
                 minLength: 2,
                response: function(event, ui) {
                    // ui.content is the array that's about to be sent to the response callback.
                    if (ui.content.length === 0) {
                         $("#empty-message").text("No results found");
                    } else {
                         $("#empty-message").empty();
                    }
                }
             });
          });
      </script>

Mais j'ai toujours le message "No results found" qui s'affiche.

Lorsque je fais la requête sur "nom.php", j'ai bien un résultat qui s'affiche.

Le code de "nom.php" est le suivant:

$term = $_GET['term'];
$companies = array(
   array( "label" => "JAVA", "value" => "1" ),
   array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ),
   array( "label" => "JAVASCRIPT", "value" => "3" ),
   array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ),
   array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ),
   array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ),
   array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ),
   array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ),
   array( "label" => "CLOUD COMPUTING", "value" => "9" ),
   array( "label" => "DATA MINING", "value" => "10" ),
   array( "label" => "DATA WAREHOUSE", "value" => "11" ),
   array( "label" => "E-COMMERCE", "value" => "12" ),
   array( "label" => "DBMS", "value" => "13" ),
   array( "label" => "HTTP", "value" => "14" )
	
);

$result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];

   if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $companyLabel );
   }
}

echo json_encode( $result );

quelle est l'url appelé par le javascript, visible dans la console ? le résultat retourné par le php avec cette url est-il celui attendu ?

regarde via un console.log ce que te retourne la page nom.php

console.log(ui.content);

Ton strtoupper($companyLabel) est inutile car tes label sont déjà en MAJUSCULES:

if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
if ( strpos( $companyLabel, strtoupper($term) )!== false ) {

Justement c'est vide...

place au débug!

met un simple echo "Bonjour"; dans ton nom.php pour voir ce que retourne ui.content

Ca m'affiche []

console log de ui retourne quoi ?

Salutations !

Dans ton code, à quel moment de ton appel ajax à ton script nom.php pour obtenir une liste de résultats, est-ce que tu transmets une valeur pour terme ?

Vérifie que ton script d'autocomplete envoi bien cette valeur (et qui plus est en get), pour t'assurer qu'elle sera bien traitée côté php.

(Dans la console du navigateur, il y a généralement un onglet réseau/network qui te permet de voir les informations envoyées et reçues... tu peux ainsi t'assurer de l'appel que fais ton script au serveur quand tu saisis des caractères dans ton champ)

Je connais pas beaucoup l'autocompletion, je suppose que c'est avec jQuery UI.

Tu as la doc ici: https://api.jqueryui.com/autocomplete/#event-response

Ton problème semble venir de ton option "source" que tu n'utilise pas comme il faut: https://api.jqueryui.com/autocomplete/#option-source

J'ai regardé un de mes codes; je lance l'autocomplete et je donne une fonction à source où jy place un $.ajax(...) à l'intérieur

Bonjour,

Le console.log(ui) me retourne "{content: Array(0)}"

Et lorsque je suis dans l'onglet "Network" j'ai une ligne comme ceci qui apparaît
nom.php?term=JA

où JA correspond à ce que j'ai tapé

l'ouverture de l'url nom.php?term=JA dans un nouvel onglet affiche bien un résultat ?

Oui ceci:

["JAVA","JAVASCRIPT","IMAGE PROCESSING USING JAVA"]

if (ui.content.length === 0) {
$("#empty-message").text("No results found");
} else {
$("#empty-message").empty();
}

que se passe-t-il dans la page ? cela affiche "No results found" ? ou il ne se passe rien (ce qui est normal vu le traitement effectué quand il y a un résultat) ?

"No result found" s'affiche

source: "nom.php", <- ne fonctionnera pas, j'ai mis le lien vers la source plus haut (prend en compte un tableau, une chaine ou une fonction, pas une URL (AJAX (post/get) oui en revanche mais pas "source")