Amélioration autocomplétion jquery

Version imprimable

18/07/2018, 16h02
bricoreur

Amélioration autocomplétion jquery
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:

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
18/07/2018, 16h50
Invité

Bonjour,

Citation:

...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" :recherch:

[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:

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:

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:

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:

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

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

18/07/2018, 19h47
Invité
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... :roll:
- "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:

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...
19/07/2018, 13h05
Celira

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

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 ? :koi:
19/07/2018, 13h31
Invité

Citation:

Envoyé par Celira

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

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

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...
19/07/2018, 14h19
bricoreur

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.