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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : 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
$("#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 : 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
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!