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
101
102
103
104
105
106
| <?php
$datas = array(
array(
'id' => 1,
'last_name' => 'Truc',
'first_name' => 'Pierre',
'email' => 'pierre.truc@gmail.com',
'label' => 'Pierre Truc',
'value' => 'Truc',
),
array(
'id' => 2,
'last_name' => 'Machin',
'first_name' => 'Paul',
'email' => 'paul.machin@gmail.com',
'label' => 'Paul Machin',
'value' => 'Machin',
),
array(
'id' => 3,
'last_name' => 'Bidule',
'first_name' => 'Philipphe',
'email' => 'philippe.bidule@gmail.com',
'label' => 'Philipphe Bidule',
'value' => 'Bidule',
),
);
if (!empty($_GET['q'])) {
ob_get_clean();
die(json_encode($datas));
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete AJAX</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-control" content="private">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/jquery-ui-1.11.0.custom/jquery-ui.min.css" rel="stylesheet">
<style>
body { padding-top: 60px; }
.navbar-form .radio label, .navbar-form .checkbox label { color: #FFF; }
#preview { display: block; margin-left: auto; margin-right: auto; }
img { max-width: 100%; }
</style>
</head>
<body>
<div class="container">
<h1>Autocomplete AJAX avec remplissage de champs</h1>
<p class="alert alert-info">Seul le champ <strong>NOM</strong> déclenche l'autocomplete.
<br />Je ne respecte pas ce que vous écrivez car pas envie de faire une base de données, donc <b>vous pouvez écrire n'importe quoi</b> ! :></p>
<form method="post" action="" class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-4" for="last_name">Nom</label>
<div class="col-sm-8">
<input type="text" name="last_name" id="last_name" value="" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="first_name">Prénom</label>
<div class="col-sm-8">
<input type="text" name="first_name" id="first_name" value="" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="email_addr">Adresse email</label>
<div class="col-sm-8">
<input type="text" name="email_addr" id="email_addr" value="" class="form-control" />
</div>
</div>
</form>
</div>
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
<script src="assets/jquery-ui-1.11.0.custom/jquery-ui.min.js"></script>
<script>
$("#last_name").autocomplete({
minLength: 1,
source: function(request, response) {
$.ajax({// call AJAX
url: '<?php echo $_SERVER['PHP_SELF']; ?>',
type: "GET",
dataType: 'json',
data: 'q=' + request.term, // défini le terme à rechercher
async: true,
cache: true,
success: function(ac_data) {
response(ac_data); // On va ajouter le résultat au tableau des résultats d'Autocomplete
},
error: function(msg) {
alert('Une erreur est survenue.');
}
});
},
select: function(event, ui) { // Assigniation de la valeur des champs au select
$('#last_name').val(ui.item.last_name);
$('#first_name').val(ui.item.first_name);
$('#email_addr').val(ui.item.email);
}
});
</script>
</body>
</html> |
