PHP autoComplete Jquery

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:

---

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:

---

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:

---

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.

Salut,

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

Code:

---

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 :lol:), tu peux gérer l'événement select facilement :

Code:

---

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 }

---

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:

---

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

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:

---

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; } });

---

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.

Ok, tu peux garder ajax alors.

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

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

Code:

---

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

---

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

Code:

---

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

---

Code:

---

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)

---

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

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

Code:

---

$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

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:

---

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

---

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

Code:

---

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);

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

Le log fonctionne
Voila ce que j'obtiens:

Code:

---

1 2 3 4 5 6

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

---

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...

Quelques modifs du js

Code:

---

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:

---

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)

---

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

Celui de jQuery et d'autocomplete.

jQuery autoComplete v1.0.7
jQuery v3.3.1

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:

---

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); }     }); } });

---

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

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"}

Ca fonctionne!
Reste maintenant a affecter les données aux champs.
J'ai essayé ça et rien

Code:

---

1 2 3 4 5 6

select: function(event, ui) { $("#nom").val(ui.item.nom);   return false; }

---

Avant de faire ça, mets un console.log pour voir les données :

Code:

---

1 2 3 4 5

select: function(event, ui) { console.log("ui.item :",ui.item); //ça donne quoi cette ligne ? return false; }

---

Rien du tout, c'est comme si elle n'était pas appelée.
Je l'ai mis juste après error

Code:

---

1 2 3 4 5 6 7 8 9

error:function(err){ console.log(err.responseText); },   select: function(event, ui) { console.log("ui.item :",ui.item);   return false; }

---

Mais non !

le select est une option d'autocomplete et pas d'ajax !

mets là juste après l'option minLength :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

$('#company_works_at') .autocomplete({ source: function(name,response){ ..... }, minLength: 1, select:function(e,ui){//le select doit être ici ! console.log("ui.item :",ui.item); return false; } });

---

Exact, pas fais attention… :roll:

Merci beaucoup pour ton aide et ta patience, tout fonctionne maintenant!

Au plaisir, bonne continuation.

Reste seulement un petit truc, c'est de gérer le cas où il n'y a plus de résultat retourné par la requête et afficher un label "Aucun résultat trouvé" dans la liste des suggestions.