Discussion :

[incent_bzh]

Bonjour à tous,

Petit problème sur un Wordpress.
Je cherche a utiliser AutoComplete de Jquery pour remplir des inputs dans un formulaire.
J'arrive bien à rechercher et suggérer dans mon input mais maintenant, je souhaite que suivant la sélection, cela remplisse les autres inputs.
Mon code Jquery:

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
  $('#company_works_at').autoComplete({
    source: function(name, response) {
      $.ajax({
        type: 'POST',
        dataType: 'json',
        url: ajaxurl,
        data: 'action=get_listing_names&name='+name,
        success: function(data) {
          response(data);
        }
      });
    }
  });

Mon php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
global $wpdb; //get access to the WordPress database object variable
 
  //get names of all businesses
  $name = $wpdb->esc_like(stripslashes($_POST['name'])).'%'; //escape for use in LIKE statement
  $sql = "select * 
    from clients
    where prenom like %s 
    ";
 
  $sql = $wpdb->prepare($sql, $name);
 
  $results = $wpdb->get_results($sql);
 
  //copy the business titles to a simple array
  $titles = array();
  foreach( $results as $r ){
    $titles[] = addslashes($r->prenom).' '.addslashes($r->nom);
 
 
  }
 
  echo json_encode($titles); //encode into JSON format and output
 
  die(); //stop "0" from being output

Je pense qu'à la suite de "success", il faut utiliser select: function (event, ui) mais je ne comprends pas comment.
Si je construis mon tableau de cette manière:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$titles['prenom'] = addslashes($r->prenom);
$titles['nom'] = addslashes($r->nom);

mon input #company_works_at ne me suggère rien

Merci d'avance pour votre aide.

[Toufik83]

Salut,

Essaies de remplir le tableau $titles d'une façon associative en utilisant les index label et value :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
foreach( $results as $r ){
    $titles[] = ["label"=>addslashes($r->nom)."-".addslashes($r->prenom),"value"=>$r->id_client /*On ajoute le id_client pour le récupérer au moment du select */];
}

Après si tout va bien et que la liste des suggestions s'affiche (je t'ai cru sur parole ), tu peux gérer l'événement select facilement :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
select:function(event,ui){
    console.log("label :",ui.item.label,", value :",ui.item.value);
    return false; //pour empêcher le comportement par défaut de l'autocomplete
}

[incent_bzh]

Quand je remplis le tableau de cette façon, la liste des suggestions ne s'affiche pas, j'ai cette erreur dans la console

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
jquery.auto-complete.min.js:3 Uncaught TypeError: e.replace is not a function
    at Object.renderItem (jquery.auto-complete.min.js:3)
    at t (jquery.auto-complete.min.js:3)
    at Object.success ((index):1659)
    at u (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at k (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

et console.log("label :",ui.item.label,", value :",ui.item.value); ne retourne rien dans la console

[Toufik83]

J'ai mis un id_client dans le tableau, est-ce que tu as un champ nommé id_client dans la table mysql ?

Puis tu n'as plus besoin d'ajax pour ça, tu peux écrire directement l'url du nom de ton fichier php dans l'option source et SANS le paramètre "..&name="+name.

C'est l'autocomplete qui s'en occupe ... :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$("#company_works_at")
.autocomplete({
	source: "le chemin du fichier.php",
	minLength: 1,
	select:function(e,data){
		console.log("label :",data.item.label,", value :",data.item.value);
		return false;
	}
});

[incent_bzh]

J'ai pas id_client mais juste id, j'avais bien fait la modif dans le code.
J'utilise ajax car le site tourne avec Wordpress.

[Toufik83]

Ok, tu peux garder ajax alors.

La liste s'affiche après avoir effectuer la modification ?

[incent_bzh]

Non, ça vient de mon tableau.
Si je le garde de cette façon, elle s'affiche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$titles[] = addslashes($r->prenom).' '.addslashes($r->nom);

Mais si c'est comme ça, j'obtiens une erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$titles[] = ["label"=>addslashes($r->nom)."-".addslashes($r->prenom),"value"=>$r->id];

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
Uncaught TypeError: e.replace is not a function
    at Object.renderItem (jquery.auto-complete.min.js:3)
    at t (jquery.auto-complete.min.js:3)
    at Object.success ((index):1659)
    at u (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at k (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

[Toufik83]

ça fonctionne chez moi (sans wordpress), peut être que ta version php n'accepte pas les crochets pour un tableau ?

[incent_bzh]

C'est bizarre car si je construis mon tableau de cette manière, cela fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$titles[] = addslashes($r->prenom).' '.addslashes($r->nom);

Et dans ma liste déroulante, j'ai bien les prénoms et noms qui s'affichent

Par contre si je fais ça, je ne peux pas récupérer d'autres données pour les afficher ailleurs

[Toufik83]

Tu peux le faire avec ta façon, mais je ne vois pas pourquoi ça donne erreur dès que tu essaies de renvoyer un tableau associatif.

tu n'as pas essayer de remplacer les crochets par array() ?,comme ça :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$titles[] = array("label"=>addslashes($r->nom)."-".addslashes($r->prenom),"value"=>$r->id);

[incent_bzh]

Même erreur.
Le problème vient peut être de là

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
success: function(data) {
    response(data);
}

Vu que ça retourne un array car après la création du tableau je fais un echo json_encode($titles);

[Toufik83]

mets un console.log("data :",data); dans succes et dis moi ce que ça donne.

[incent_bzh]

Le log fonctionne
Voila ce que j'obtiens:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
data : 
[{…}]
0: {label: "nomtest-prenomtest", value: "7"}
length: 1
__proto__: Array(0)

[Toufik83]

Donc le fichier php retourne bien un objet 0: {label: "nomtest-prenomtest", value: "7"} dont le label est la combinaison du nom-prenom et la value est l'id.

Le problème n'est pas dans php, mais plutôt dans js.

Franchement je ne sais pas quoi dire...

[incent_bzh]

Quelques modifs du js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
source: function(name, response) {
      $.ajax({
        type: 'POST',
        dataType: "json",
        url: ajaxurl,
        data: 'action=get_listing_names&name='+name,
        success: function( data )  {
                        console.log(data);
                         response($.map(data, function(item) {    //ITEM HERE IS UNDEFINED!!!!!
                         alert(item.nom);
                           return {  
 
                               label: item.nom,  
                               value: item.id  
                           };  
                       }));  
                    },
                error:function(){
                  console.log(arguments)
                }
 
 
      });
    },

Mon alert fonctionne bien par contre je n'ai pas le select et dans la console j'ai cette erreur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
jquery.auto-complete.min.js:3 Uncaught TypeError: e.replace is not a function
    at Object.renderItem (jquery.auto-complete.min.js:3)
    at t (jquery.auto-complete.min.js:3)
    at Object.success ((index):1667)
    at u (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at k (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

[Toufik83]

Tu peux me montrer les version des scripts que tu utilises ?

Celui de jQuery et d'autocomplete.

[incent_bzh]

jQuery autoComplete v1.0.7
jQuery v3.3.1

[Toufik83]

Ha! c'est un problème de version, toi tu utilises jQuery autoComplete alors qu'il fallait utiliser l'autocomplete de jQuery UI.

remplace la source du <script src="..."> par celle-là :
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>.

Puis le css accompagnant :
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
Maintenant tu as jQuery UI qui contient la méthode autocomplete avec "c" en minuscule.

Le code devient simple alors :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
$("#company_works_at").autocomplete({
   .....,
   source: function(name, response) {
      $.ajax({
        type: 'POST',
        dataType: "json",
        url: ajaxurl,
        data: 'action=get_listing_names&name='+name,
        success: function( data )  {
               console.log(data);
               response(data);  
        },
         error:function(err){
              console.log(err.responseText);
         }
 
 
      });
   }
});

[incent_bzh]

J'ai plus d'erreur mais maintenant mon tableau est vide.
console.log(data); renvoie rien

[Toufik83]

Cela veut dire que le fichier php n'a rien trouvé, pourquoi ? parce que le data que tu envois n'est pas bon.

Essaies de mettre ça dans l'option data d'ajax :
data:{name:name.term,action:"get_listing_names"}