Autocomplete + autopopulate en Javascript?

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:

<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:

$.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):

$("#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 "-":

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!

Salut,

Impossible a faire avec un "vrai" select, si tu regarde le code source de ton lien, le select est un fake

Si tu veut faire la même chose, il faut écouter le onchange de ton input text et filtrer ton tableau JSON avant de l'afficher ou alors mettre les options qui ne correspondent pas en display: none