PHP autoComplete Jquery

**incent_bzh** · 05/02/2020, 17h11

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** · 05/02/2020, 17h49

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** · 05/02/2020, 17h56

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** · 05/02/2020, 18h13

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