Autocomplete
matiou34
Messages postés
198
Date d'inscription
Statut
Membre
Dernière intervention
-
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai ce code ci-dessous. Je souhaiterais que chaque pays renvoie vers une url spécifique de type url="/beta/world/index.php?pays=AFGHANISTAN"
Merci pour votre aide !
<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></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>
J'ai ce code ci-dessous. Je souhaiterais que chaque pays renvoie vers une url spécifique de type url="/beta/world/index.php?pays=AFGHANISTAN"
Merci pour votre aide !
<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></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>
2 réponses
Je pense que ça va s'avérer difficile à faire sans PHP. As-tu une raison spécifique pour n'utiliser que du Javascript ? Ou Est-ce simplement parce que tu n'es pas à l'aise avec PHP ?
matiou34
Messages postés
198
Date d'inscription
Statut
Membre
Dernière intervention
4
Même du php m'irait mais je ne sais pas par ou commencer en faite. Je trouve des exemple sur internet mais ce que je cherche est plus simple.
Voici rapidement en php, pour faire ta liste et afficher les liens :
Quelques références :
www.w3schools.com/php/default.asp
www.w3schools.com/php/php_looping_for.asp
Tu peux garder et adapter ton Javascript pour tes KeyEvents et ce genre de chose.
Et voilà ! Une liste de liens qui transmettent ta variable dans l'URL ! Pour la récupérer, tu vas juste chercher la variable $_GET['pays'].
www.w3schools.com/php/php_get.asp
Dis-moi si quelque chose te donne de la difficulté... On va lui faire sa fête ! ;-)
<?php
$pays = array(
'pays1',
'pays2',
'pays3',
...
);
// On met la liste en ordre alphabétique, au cas où...
sort($liste);
foreach ($liste as $element) {
print '<p><a href="?pays=' . strtoupper($element) . '">' . $element . '</a></p>':
}
?>
Quelques références :
www.w3schools.com/php/default.asp
www.w3schools.com/php/php_looping_for.asp
Tu peux garder et adapter ton Javascript pour tes KeyEvents et ce genre de chose.
Et voilà ! Une liste de liens qui transmettent ta variable dans l'URL ! Pour la récupérer, tu vas juste chercher la variable $_GET['pays'].
www.w3schools.com/php/php_get.asp
Dis-moi si quelque chose te donne de la difficulté... On va lui faire sa fête ! ;-)
Premièrement, je déconseille vivement les frames, pour de multiples raisons. Mais comme tu ne te spécialises pas en PHP je ne te renverrai pas vers du AJAX, ça risque de te décourager. Quoique je t'invite à te renseigner quand tu auras du temps et de la motivation ;-)
En attendant, allons-y pour les frames. Ça fait longtemps que j'ai pas touché à ça, donc je vais être un peu vague... Déjà, le lien suivant devrait te donner des indices :
www.w3schools.com/jsref/dom_obj_frame.asp
En fait, je pense que tu peux te référer à un objet frameObject.contentDocument de la même manière que si c'était un objet document sur ta page principale. De là tu peux accéder à son contenu de la même manière qu'avec document.
www.w3schools.com/jsref/prop_frame_contentdocument.asp
Si quelqu'un veut ajouter son grain de sel, ne vous gênez pas, comme je dis je ne suis pas tout à fait sûr de ce que je dis ! ;-)
En attendant, allons-y pour les frames. Ça fait longtemps que j'ai pas touché à ça, donc je vais être un peu vague... Déjà, le lien suivant devrait te donner des indices :
www.w3schools.com/jsref/dom_obj_frame.asp
En fait, je pense que tu peux te référer à un objet frameObject.contentDocument de la même manière que si c'était un objet document sur ta page principale. De là tu peux accéder à son contenu de la même manière qu'avec document.
www.w3schools.com/jsref/prop_frame_contentdocument.asp
Si quelqu'un veut ajouter son grain de sel, ne vous gênez pas, comme je dis je ne suis pas tout à fait sûr de ce que je dis ! ;-)