Bonjour,

j'ai un code qui fonctionne très bien avec un input en autocomplete mais je souhaiterai modifier le code pour que 3 input sont liés.

Tout fonctionne avec mysql et vient d'une seule table.

exemple utilisation
1 input on selectionne par exemple lille(59000)
2 input autocomplete avec les adresse qui sont selectionner avec commune mais aussi code postal précédent on selectionne la bonne adresse.
3 input autocomplete avec les noms des services on selectionne sont service


Et a la fin je doit recuperer l'id du service selectionné dans le input du nom du service , le nom ne sert a rien à la soumission du formulaire.

pour le moment donc j'ai le 1er input qui se remplit par rapport a ville (code postal)

Code html : 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<html>
	<head>
		<meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
		<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
		<style>
                        #city-container{display: inline-block;position: relative;vertical-align: middle;width: 360px;}
                        #city-container input{width:100%}
                        #city-container ul{left:0 !important;right:0 !important;max-height:320px;overflow-y:auto;overflow-x:hidden;}
                </style>
<script>
/* initialisation paramètres globaux : */
var cache = {}; /* tableau cache de tous les termes */
var term = null; /* terme renseigné dans le champ input */
var baseUrl = 'https://www.monsite.com/'; /* url du site */
baseUrl = '';
 
$(document).ready(function() {
        /* city autocomplete */
        $('#city').autocomplete({
                minLength:1, /* nombre de caractères minimaux pour lancer une recherche */
                delay:200, /* delais après la dernière touche appuyée avant de lancer une recherche */
                scrollHeight:320,
                appendTo:'#city-container', /* div ou afficher la liste des résultats, si null, ce sera une div en position fixe avant la fin de </body> */
                
                /* dès qu'une recherche se lance, source est executé, il peut contenir soit un tableau JSON de termes, soit une fonctions qui retournera un résultat */
                source:function(e,t){
                        term = e.term; /* récupération du terme renseigné dans l'input */
                        if(term in cache){ /* on vérifie que la clé "term" existe dans le tableau "cache", si oui alors on affiche le résultat */
                                t(cache[term]);
                        }else{ /* sinon on fait une requête ajax vers city.php pour rechercher "term" */
                                $('#loading').attr('style','');
                                $.ajax({
                                        type:'GET',
                                        url:'city.php',
                                        data:'name='+e.term,
                                        dataType:"json",
                                        async:true,
                                        cache:true,
                                        success:function(e){
                                                cache[term] = e; /* vide ou non, on stocke la liste des résultats avec en clé "term" */
                                                if(!e.length){ /* si aucun résultats, on renvoi un tableau vide pour informer qu'on a rien trouvé */
                                                        var result = [{
                                                                label: 'Aucune ville trouvée...',
                                                                value: null,
                                                                id: null,
                                                        }];
                                                        t(result); /* envoit du résultat à source */
                                                }else{ /* sinon on renvoi toute la liste */
                                                        t($.map(e, function (item){
                                                                return{
                                                                        label: item.label,
                                                                        value: item.value,
                                                                        id: item.id,
                                                                }
                                                        }));  /* envoit du résultat à source avec map() de jQuery (permet d'appliquer une fonction pour tous les éléments d'un tableau */
                                                }
                                                $('#loading').attr('style','display:none;');
                                        }
                                });
                        }
                },
                
                /* sélection depuis la liste des résultats (flèches ou clic) > ajout du résultat automatique et callback */
                select: function(event, ui) {
                        $('form input[name="city-hidden"]').val(ui.item ? ui.item.id : ''); /* on récupère juste l'id qu'on stocke dans l'autre input */
                },
                open: function() {
                        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function() {
                        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                },
        });
});
</script>
	</head>
	<body>
		<form>
		<form>
			<h2>Test Formulaire</h2>
			<label for="city">Entrer une ville</label>
			<span id="city-container">
				<input type="text" placeholder="Choisir une ville" name="city" id="city">
			</span>
 
			<span id="city-container">
				<input type="text" placeholder="" name="adresse_service" id="adresse_service">
			</span>
			<span id="city-container">
				<input type="text" placeholder="" name="nom_service" id="nom_service">
			</span>
			<input type="hidden" name="city-hidden">//id du service
			<span id="loading" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>
 
		</form>
	</body>
</html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


et le fichier city.php :

Code php : 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
	ini_set('display_errors', 1);
	ini_set('display_startup_errors', 1);
	error_reporting(E_ALL);
 
	$array = array();
	$responseCode = 500;
 
	/* si la requête est bien en Ajax et la méthode en GET ... */
	if((strtolower(filter_input(INPUT_SERVER, 'HTTP_X_REQUESTED_WITH')) === 'xmlhttprequest') && ($_SERVER['REQUEST_METHOD'] == 'GET')){
		/* on récupère le terme et on le duplique en terme en transformant les espaces en tirets et tirets en espaces (au cas ou) */
		$q = str_replace("''","'",urldecode($_REQUEST['name']));
		$q = strtolower(str_replace("'","''",$q));
		$qTiret = str_replace(' ','-',$q);
		$qSpace = str_replace('-',' ',$q);
 
		$array = array();
 
		/* connexion SQL  (avec PDO car Mysql_connect sera déprécié dès php 7 :P) */
 
		$connexion = new PDO('mysql:host='.$host.';dbname='.$database, $user, $password);
 
		/* creation de la requête SQL */
		$query=$connexion->query('SELECT ts.id_service, ts.nom_service, ts.commune, ts.code_postal FROM service ts WHERE (ts.commune LIKE \'%'.$q.'%\' OR ts.commune LIKE \'%'.$qTiret.'%\' OR ts.commune LIKE \'%'.$qSpace.'%\' OR ts.code_postal LIKE \'%'.$q.'%\') group by ts.commune ORDER BY ts.commune ASC');
		$query->setFetchMode(PDO::FETCH_OBJ);
 
		/* remplissage du tableau avec les termes récupéré en requete (ou non) */
		while($q = $query->fetch()){
			$name = utf8_encode($q->commune);
			$postalcode = utf8_encode($q->code_postal);
			$array[] = array(
					'id' => $q->id_service,
					'label' => $name.' ('.$postalcode.')',
					'value' => $name.' ('.$postalcode.')',
			);
		}
		$query->closeCursor();
 
		//die(print_r($array));
 
		$responseCode = 200;
	}
 
	/* génération réponse JSON */
	http_response_code($responseCode);
	header('Content-Type: application/json');
	echo json_encode($array);
?>

merci pour votre aide.