Autocomplete + autopopulate en jQuery?
Bonjour à tous,
Je vous explique ce que j'aimerais faire.
J'ai deux champs select: un champ pays et un champ sous-pays.
Le deuxième champ se fait en fonction du premier (selon le pays qu'on choisit, les sous-pays affichés ne seront pas les mêmes).
Voici à quoi ressemble un bout de mon .json:
{
"Géorgie": "Abkhazie,Batoum",
"Djibouti": "Afars et Issas,Côte des Somalis",
"Iles Cook": "Aitutaki,Penrhyn"
}
Voici à quoi ressemble mon HTML:
Code:
1
2
3
4
5
6
7
8
9
10
11
| <div id="page-wrap">
<h1>Pays</h1>
<select id="json-one">
<option selected value="base">Please Select</option>
</select><br />
<select id="json-two">
<option>Please choose from above</option>
</select>
</div> |
J'utilise le script suivant pour récupérer les pays de mon .json:
Code:
1
2
3
4
5
6
7
8
| $.getJSON("jsondata/data2.json", function (data) {
$.each(data, function (i, item) {
$('<option>', {
value: string_to_slug(i),
html: i + '</option>'
}).appendTo('select[id="json-one"]');
});
}); |
Ensuite, j'utilise ce script pour peupler automatiquement mon 2ème champ (champ sous-pays) en fonction du 1er (champ pays):
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
28
29
30
31
32
33
34
| $("#json-one").change(function() {
var $dropdown = $(this);
$.getJSON("jsondata/data2.json", function(data2) {
$("#json-one")
var key = $dropdown.val();
var vals = [];
switch(key) {
case 'georgie':
vals = data2["Géorgie"].split(",");
break;
case 'djibouti':
vals = data2["Djibouti"].split(",");
break;
case 'iles-cook':
vals = data2["Iles Cook"].split(",");
break;
case 'base':
vals = ['Please choose from above'];
}
var $jsontwo = $("#json-two");
$jsontwo.empty();
$.each(vals, function(index, value) {
$jsontwo.append("<option>" + value + "</option>");
});
});
}); |
J'utilise également cette fonction pour mettre en minuscules toutes mes value de options, enlever les accents, remplacer les parenthèses et les espaces par des "-":
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| function string_to_slug(str) {
str = str.replace(/^\s+|\s+$/g, ''); // trim
str = str.toLowerCase();
// remove accents, swap ñ for n, etc
var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
var to = "aaaaeeeeiiiioooouuuunc------";
for (var i=0, l=from.length ; i<l ; i++) {
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
}
str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
.replace(/\s+/g, '-') // collapse whitespace and replace by -
.replace(/-+/g, '-'); // collapse dashes
return str;
} |
J'aimerais maintenant, grâce à de l'autocomplete, pouvoir taper le début d'un pays ou d'un sous-pays et avoir le résultat qui s'affiche comme dans cet exemple: http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml (le champ "Filtering mode").
Est-ce quelqu'un aurait une idée?
Merci!
