Discussion :

[YuukoChan]

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!

[mesken]

Ta fonction qui charge les pays ou les sous pays dois se trouver dans l’évènement keyup du champ ou du comboBox concerné, du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('#MonComboBox').keyup(function () {
      //Ici tu appelle le JSON qui récupère dans la BD les pays ou les sous pays ayant les première lettres saisis dans ce champ comme paramère, ce qui te chargera le comboBox au fur et a mesure que l'utilisateur tapera ou effacera un mot
 
});

Et au niveau du Serveur du fait juste ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
//Tu récupère le mot saisi a chaque fois
$motSaisi=(isset($_GET['motSaisi'])) ? $_GET['motSaisi'] : Null;
$motSaisi='%'.$motSaisi.'%';
$requete = "SELECT nomPays FROM `pays` WHERE nomPays LIKE '$motSaisi'";

Maintenant lorsque tu fais ça, quand l'utilisateur saisira un mot s'il ne trouve rien, la liste affichera selon le choix précédent, pour qu'il affiche le vide au cas où le choix ne renvoi rien, tu devra tester si aucun enregistrement n'a été renvoyé, tu renvoi le vide à JSON sinon tu renvoi l'objet JSON
Du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$nombrePays=mysql_num_rows($resultat);
 
if($nombrePays) {
	while ($row = mysql_fetch_array($resultat)) {
		$listePays[] = array(
			'nomPays' => $row['nomPays'],
		  );
	}
}
else {
$listePays="";
}
 
echo json_encode($listePays);

Hope this will help