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"> |
Lier 3 input avec autocomplete
Répondre avec citation
Partager