Vous n'êtes pas identifié(e).
- Contributions : Récentes | Sans réponse
Pages :: 1
#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 
Cordialement
Hors ligne
#2 30-08-2015 13:06:54
- Pierrot
- Ancien nouveau
- Inscription : 08-05-2009
- Messages : 1 195
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
Pages :: 1