PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

#1 24-08-2015 14:39:17

bndd24
Membre
Inscription : 12-07-2015
Messages : 3

Autocomplétion sans bdd

Bonjour,

Voila, j'ai un formulaire avec plusieurs champs text, nom du garage, adresse, code postal, ville, etc

Je souhaite que lorsque l'on clique sur un lien au dessus du formulaire, les champs se remplissent tout seul (auto complétion mais SANS bdd).

J'ai bien conscience que c'est un forum php.. mais si tout de même quelqu'un a la gentillesse de me guider vers une solution etc..

J'ai déjà cherché sur le net mais impossible de trouver une solution sans bdd hmm

Cordialement


Hors ligne

#2 30-08-2015 13:06:54

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 190

Re : Autocomplétion sans bdd

Salut,
Sans base de données, ok, mais d'ou viennent les donnée ?
a++

Hors ligne

#3 28-03-2016 14:23:52

Guigeek
Membre
Inscription : 28-03-2016
Messages : 1

Re : Autocomplétion sans bdd

Bonjour,

Je déterre un peu, mais je sais que cela existe effectivement.
j'étais moi-même tombé sur un script javascript il y'a quelques années de cela qui permettait de faire une auto complétion sans base de données.
En fait, les noms ou numéros étaient tout simplement enregistrés dans une liste se trouvant directement dans le script js sous forme de tableau javascript (ou éventuellement appelés via ajax à partir d'un document txt).
Un tel besoin peut surprendre dans la mesure où une quantité importante de données sera mieux lotie dans une "vraie" bdd que stockée dans un fichier quelconque (Si en effet vous voulez un jour faire évoluer votre site en multilingual par exemple (entre autres choses), je vous raconte pas la galère si toute votre "base de données" est entièrement constituée de fichiers .txt), mais pour une quantité limité d’occurrences, cela peut s'avérer très utile.

Voici un exemple de script fonctionnel permettant une recherche de pays.

La recherche n'est pas entièrement sensible à la casse* et marche plutôt bien et est très fluide, mais il faudra vous même améliorer le code si vous souhaitez qu'il soit également possible de retrouver une occurrence à partir d'une syllabe "interne" au mot recherché (Exemple : actuellement impossible de retrouver le nom de pays "Côte d'ivoire" en tapant simplement "Ivoire", il faut nécessairement commencer par les premières lettres).

*Recherche sensible aux accents et caractères spéciaux mais ne pose pas de problème en ce qui concerne les majuscules et les minuscules.


Voici un exemple du code auquel je fais référence ci-dessous :


<body onload="document.getElementById('champ').focus()">
<form name="myForm" method="post" action="autocomplete.html">
 <div onkeydown="return moveSelection()">
  Tapez le nom d'un pays :<br />
  <input type="text" autocomplete="off" name="myCombo" id="champ"
  onkeyup="window.setTimeout('refreshList();', 10); return getEnterKey()" />
  <div id="liste"></div>
 </div>
 <div>
 <input type="text" onfocus="document.getElementById('liste').style.display= 'none'" />
 </div>
</form>
 <script type="text/javascript">
 <!--
  var selIndex = 0;
  var nbMatch = 0;
  var myArray = new Array();
  var content = '';
  var old = '';
  myArray[0] = 'Acores';
  myArray[1] = 'Afghanistan';
  myArray[2] = 'Afrique du Sud';
  myArray[3] = 'Albanie';
  myArray[4] = 'Algerie';
  myArray[5] = 'Allemagne';
  myArray[6] = 'Angola';
  myArray[7] = 'Arabie Saoudite';
  myArray[8] = 'Autriche';
  myArray[9] = 'Bahrain';
  myArray[10] = 'Belgique';
  myArray[11] = 'Benin';
  myArray[12] = 'Botswana';
  myArray[13] = 'Bulgarie';
  myArray[14] = 'Burkina Faso';
  myArray[15] = 'Burundi';
  myArray[16] = 'Cameroun';
  myArray[17] = 'Centr\'Afrique';
  myArray[18] = 'Chypre';
  myArray[19] = 'Comorres';
  myArray[20] = 'Congo';
  myArray[21] = 'Cote d\'Ivoire';
  myArray[22] = 'Croatie';
  myArray[23] = 'Danemark';
  myArray[24] = 'Djibouti';
  myArray[25] = 'Egypte';
  myArray[26] = 'Emirats Arabes Unis';
  myArray[27] = 'Erithree';
  myArray[28] = 'Espagne';
  myArray[29] = 'Estonie';
  myArray[30] = 'Ethiopie';
  myArray[31] = 'Finlande';
  myArray[32] = 'France';
  myArray[33] = 'Gabon';
  myArray[34] = 'Ghana';
  myArray[35] = 'Grece';
  myArray[36] = 'Guadeloupe';
  myArray[37] = 'Guinee';
  myArray[38] = 'Guinee Equatoriale';
  myArray[39] = 'Guinee-Bissau';
  myArray[40] = 'Guyane';
  myArray[41] = 'Guyanne Francaise';
  myArray[42] = 'Hongrie';
  myArray[43] = 'Ile Maurice';
  myArray[44] = 'Iles Canaries';
  myArray[45] = 'Iles du Cap Vert';
  myArray[46] = 'Iran';
  myArray[47] = 'Irlande';
  myArray[48] = 'Islande';
  myArray[49] = 'Israel';
  myArray[50] = 'Italie';
  myArray[51] = 'Jordanie';
  myArray[52] = 'Kenya';
  myArray[53] = 'Koweit';
  myArray[54] = 'Lesotho';
  myArray[55] = 'Lettonie';
  myArray[56] = 'Liban';
  myArray[57] = 'Liberia';
  myArray[58] = 'Liechtenstein';
  myArray[59] = 'Lituanie';
  myArray[60] = 'Luxembourg';
  myArray[61] = 'Madagascar';
  myArray[62] = 'Madere';
  myArray[63] = 'Malawi';
  myArray[64] = 'Mali';
  myArray[65] = 'Malte';
  myArray[66] = 'Maroc';
  myArray[67] = 'Martinique';
  myArray[68] = 'Mauritanie';
  myArray[69] = 'Monaco';
  myArray[70] = 'Mozambique';
  myArray[71] = 'Namibie';
  myArray[72] = 'Niger';
  myArray[73] = 'Nigeria';
  myArray[74] = 'Norvege';
  myArray[75] = 'Nouvelle Caledonie';
  myArray[76] = 'Oman';
  myArray[77] = 'Ouganda';
  myArray[78] = 'Papouasie-Nouvelle Guinee';
  myArray[79] = 'Pays-Bas';
  myArray[80] = 'Pologne';
  myArray[81] = 'Polynesie Francaise';
  myArray[82] = 'Portugal';
  myArray[83] = 'Qatar';
  myArray[84] = 'Republique Populaire du Congo';
  myArray[85] = 'Republique Tcheque';
  myArray[86] = 'Reunion';
  myArray[87] = 'Roumanie';
  myArray[88] = 'Royaume Uni';
  myArray[89] = 'Russie';
  myArray[90] = 'Rwanda';
  myArray[91] = 'Saint Marin';
  myArray[92] = 'Saint Pierre et Miquelon';
  myArray[93] = 'Senegal';
  myArray[94] = 'Sierra Leone';
  myArray[95] = 'Slovaquie';
  myArray[96] = 'Slovenie';
  myArray[97] = 'Somalie';
  myArray[98] = 'Soudan';
  myArray[99] = 'Suede';
  myArray[100] = 'Suisse';
  myArray[101] = 'Swaziland';
  myArray[102] = 'Syrie';
  myArray[103] = 'Tanzanie';
  myArray[104] = 'Tchad';
  myArray[105] = 'Togo';
  myArray[106] = 'Tunisie';
  myArray[107] = 'Turquie';
  myArray[108] = 'Ukraine';
  myArray[109] = 'Yemen';
  myArray[110] = 'Yougoslavie';
  myArray[111] = 'Zambie';
  function fillInput(i)
  {
   document.getElementById('champ').value = myArray[i];
   document.getElementById('liste').style.display= 'none';
   document.getElementById('champ').focus();
  }
  function refreshList()
  {
   if(document.getElementById('champ').value != old)
   {
    old=document.getElementById('champ').value;
    document.getElementById('liste').innerHTML = '';
    if (document.getElementById('champ').value.length > 0)
    {
     nbMatch = 0;
     content='';
     for (var i=0; i < myArray.length; i++)
     {
      if (myArray[i].slice(0, document.getElementById('champ').value.length).toUpperCase() == document.getElementById('champ').value.toUpperCase())
      {
       nbMatch++;
       content += '<div id="' + nbMatch + '" class="result" onclick="fillInput(' + i + ')">' + myArray[i] + '</div>';
      }
     }
     if (nbMatch)
     {
      document.getElementById('liste').innerHTML = content;
      document.getElementById('liste').style.height = (Math.min(5, nbMatch)) + 'em';
      document.getElementById('liste').style.display = 'block';
      selIndex=0;
     }
     else
      document.getElementById('liste').style.display = 'none';
    }
    else
    {
     document.getElementById('liste').style.display = 'none';
    }
   }
  }
  function moveSelection()
  {
   if (event.keyCode == 40)
   {
    if (selIndex > 0 && selIndex < nbMatch)
    {
     document.getElementById(selIndex).style.backgroundColor = 'white';
     document.getElementById(selIndex).style.color = 'black';
    }
    if (selIndex < nbMatch)
    {
     selIndex++;
     document.getElementById(selIndex).style.backgroundColor = 'darkblue';
     document.getElementById(selIndex).style.color = 'white';
     document.getElementById(selIndex).focus();
    }
    return false;
   }
   else if (event.keyCode == 38)
   {
    if (selIndex > 1)
    {
     document.getElementById(selIndex).style.backgroundColor = 'white';
     document.getElementById(selIndex).style.color = 'black';
    }
    if (selIndex > 1 && selIndex <= nbMatch)
    {
     selIndex--;
     document.getElementById(selIndex).style.backgroundColor = 'darkblue';
     document.getElementById(selIndex).style.color = 'white';
    }
    return false;
   }
   return getEnterKey();
  }
  function getEnterKey()
  {
   if (event.keyCode == 13)
   {
    if (selIndex > 0)
    {
     document.getElementById('champ').value = document.getElementById(selIndex).innerText;
     document.getElementById('liste').style.display = 'none';
     old=document.getElementById(selIndex).innerText
    }
    return false;
   }
   else
   {
    return true;
   }
  }
 -->
 </script>
</body>
 

Hors ligne

Pied de page des forums