Amélioration autocomplétion jquery

**bricoreur** · 18/07/2018, 16h02

Bonjour,

J'ai réussi à faire des autocomplétions via ajax + requêtes préparées pour :

1. code postal <- > ville (sur la base du tuto Xavier ZOLEZZI)
2. sur un simple champ (pays, département......)

J'effectue mes contrôles :
côté client : javascript en utilisant des regex + champ qui apparaît en rouge lorsque la saisie est incorrecte
côté serveur : en POO, avec des setters en utilisant FILTER_VAR.....Filter_Validate_Email......

Tout semble fonctionner.

Maintenant j'aimerai améliorer mes autocomplétions selon les points suivants. j'ai cherché des tuto mais rien qui correspondait à ce que je cherche

QUESTION 1 : structuration

dans mes ajax, l'URL renvoie vers un ficher xxxx.php. Faut-il créer un fichier xxx.php pour chaque requête ?
ex: ajax 1 url : "pays.php" => fichier "pays.php"
ajax 2 url : "departement.php" => fichier "departement.php"....

QUESTION 2 : valeur par défaut dans le champ pays (+ autocomplete)
j'ai tout simplement saisi VALUE="FRANCE". Est-ce correct ?

Code :

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

1
2
3
 
    <label for="pays_j"> Pays : </label>
    <input id="pays_j" Value="FRANCE" onkeydown="cherche_pays()">  ==> appel de l'ajax....

QUESTION 3 : comment autoriser la saisie d'une chaîne de caractère pour l'autocomplétion mais n'autoriser que la validation des données issues de ma table. Autrement dit, interdire toute saisie personnelle
J'aide l'utilisateur à trouver son pays mais il ne peut pas valider un pays qui ne serait pas dans la base de données.

QUESTION 4 :
j'aimerai savoir comment réaliser une autocomplétion DEDUCTIVE. Je m'explique
1. code postal -> 2. proposition des villes selon le code postal -> 3. proposition des rues selon la ville choisie

Avez-vous des ressources à ce sujet, je ne trouve rien s'y rapportant (DEDUCTIVE)

je ne sais pas si je devais ouvrir 4 posts différents ? et si je suis dans le bon espace de discussion

Invité · 18/07/2018, 16h50

Bonjour,

...J'ai réussi à faire des autocomplétions via ajax + requêtes préparées ...

On demande à voir...

QUESTION 1 : structuration
On peut faire un fichier unique, en envoyant un parmamètre supplémentaire (pays, département).
Perso, je préfère la clarté. Donc, plusieurs fichiers, spécifiques.

QUESTION 2 : valeur par défaut dans le champ pays (+ autocomplete)
"FRANCE" par défaut, pourquoi pas.

QUESTION 3 : n'autoriser que la validation des données issues de ma table.
Là, tu peux lancer un test au submit du formulaire.

QUESTION 4 : une autocomplétion DEDUCTIVE
Il suffit de récupérer et d'envoyer autant de paramètres que nécessaires pour mettre à jour les différentes listes.
C'est le principe des "listes liées Ajax"

**bricoreur** · 18/07/2018, 18h13

[QUOTE=jreaux62;10370931]Bonjour,

On demande à voir...

C'est assez surprenant comme réaction...surtout venant d'un modérateur.
Si je présente mon script c'est surtout pour aider humblement à mon tour celui qui serait comme moi.

fichier 1 Form + jquery

Code :

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

1
2
3
4
5
6
7
 
<body>
 
  <div class="ui-widget">
    <label for="pays_j"> Pays : </label>
    <input id="pays_j" Value="FRANCE" onkeydown="cherche_pays()">
  </div>

Fichier 2 : JS NB : j'ai réussi également avec POST.....

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
26
27
 
function cherche_pays() {       
 
    $(document).ready(function() {
 
              $('#pays_j').autocomplete({
                    source: function(request, response){
 
                      $.ajax({
                          url:"recherche_pays.php",
                          dataType:"json",
                          data:{q:request.term},
                          success:function(data){
                            response(data);
                          }
                      });
 
                    },
                    minLength:2,
 
 
                    select: function(event,ui) {
                      ui.item.label;
                    }
              });
          });
  }

Fichier 3 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
 
<?php
 
 
require_once "ConnectPDO.php"; 
 
 
	$req = $_GET['q'];   
 
	$sql = ("SELECT * FROM listpays WHERE nom_pays LIKE :req "); 
	$stmt = $bdd->prepare($sql);
	$stmt->bindValue(':req', ('%'.$req.'%'), PDO::PARAM_STR); 
	$stmt->execute();
 
	$array = array(); 
 
	while($row = $stmt->fetch(PDO::FETCH_ASSOC)) 
		{
		    $array[] = $row['nom_pays']; 
		}
 
	echo json_encode($array);

Fichier 4 : Connection PDO = sur conseils de CELIRA

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
 
 
<?php
 
 
$dsn = 'mysql:host=127.0.0.1;dbname=test';
$user = '';
$password = ''; 
 
 
 
 
	$bdd = new PDO($dsn, $user, $password, [
        PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_EMULATE_PREPARES   => false
            ]);
?>

Certes, ce script peut certainement être optimisé mais il fonctionne. Dons vous voyez ....

Enfin, sur vos bons conseils, j'utilise la fonction RECHERCHE mais certainement que je n'arrive pas encore à poser les mots clefs exacts.

Invité · 18/07/2018, 19h47

1- "On demande à voir..." voulait simplement dire : "montre-nous ton code..."

Comment veux-tu qu'on apporte des modifications/améliorations à ton code si tu ne le montres pas ??
Depuis le temps, tu devrais le savoir, non ?

2- Et le fait d'être "modérateur" n'a rien à voir...

"modérateur" ne veut pas dire "homme vertueux".
Tout comme "étudiant" ne veut pas dire "crétin des Alpes".

3- Ceci étant dit : $(document).ready(function() { n'a rien à faire dans la fonction.

Code :

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

1
2
3
4
5
6
function cherche_pays() {       
   //...
}
$(document).ready(function() {
   // ... Actions à faire quand le document est prêt.
});

Comme quoi, il n'est JAMAIS inutile de MONTRER ton code...

**Celira** · 19/07/2018, 13h05

Le dalmatien aboie souvent, mais ne mord que rarement (et uniquement des gens qui l'ont mérité)

Sinon pour revenir aux questions de départ :
Question 1 :
Personnellement, je préfère des fichiers séparés si les données n'ont aucun rapport (par exemple : pays, ville, département)
Toutefois, je peux utiliser un même fichier pour retourner les mêmes données avec des filtres différents. Par exemple, une liste de villes appartenant à un pays, à une région ou à un département.

Question 2 : là, c'est à toi de voir : il faut faire le ratio entre les gens qui ça va aider et les gens que ça va ennuyer. Est-ce que la grande majorité de tes utilisateurs vont renseigner "France" dans ce champ ? Dans ce cas, oui, c'est une bonne idée de le mettre par défaut.

Question 3 : en plus de la validation, tu peux peut-être stocker la valeur sélectionnée dans un champ caché et utiliser cette valeur à la soumission du formulaire, et non pas celle du champ en auto-complete. Mais là, je pense qu'il faut plutôt poser la question dans le forum jquery.

Question 4 : jreaux a raison : ce que tu cherches à faire, ce sont des listes liées. A moins que tu ne veuilles faire tout ça dans le même champs ?

Invité · 19/07/2018, 13h31

Envoyé par Celira

Le dalmatien aboie souvent, mais ne mord que rarement (et uniquement des gens qui l'ont mérité)

Merci Celira.
Depuis le temps, tu me connais bien...

En fait, je me donne "un genre" : tantôt le bon, tantôt la brute, tantôt le truand.
Sinon, on s'ennuie à la longue

Et souvent, plus j'aboie, meilleure est ma réponse !

D’ailleurs... @bricoreur :
Au lieu de t’arrêter à ma 1ère phrase, tu aurais dû lire le reste : je donne quand même pas mal de pistes...

**bricoreur** · 19/07/2018, 14h19

Merci pour vos retours...

j'ai commencé à lire les ressources trouvées...comme évoqué précédemment, je ne posais pas les mots clefs exacts.... les listes liées répondent pleinement à mes attentes...au travail

je m'attaquerai à la validation de mes données un peu plus tard.... un lièvre à la fois.

Amélioration autocomplétion jquery

Langage PHP

Discussions similaires

Partager

Partager