<input type="text"> Dynamique comme google
cs_mcei
Messages postés
4
Date d'inscription
dimanche 1 mars 2009
Statut
Membre
Dernière intervention
18 février 2011
-
5 nov. 2010 à 17:46
gzen92 Messages postés 1 Date d'inscription dimanche 29 décembre 2002 Statut Membre Dernière intervention 15 mars 2011 - 15 mars 2011 à 08:30
gzen92 Messages postés 1 Date d'inscription dimanche 29 décembre 2002 Statut Membre Dernière intervention 15 mars 2011 - 15 mars 2011 à 08:30
A voir également:
- Afficher texte dynamique javascript
- Récupérer données json (javascript) - Conseils pratiques -Javascript
- Afficher un tableau php en html - Conseils pratiques -PHP
- Javascript poo - Conseils pratiques -Javascript
- Base de données javascript - Conseils pratiques -Javascript
- Javascript goto ✓ - Forum Javascript / DHTML
2 réponses
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
5 nov. 2010 à 22:58
5 nov. 2010 à 22:58
Bonjour,
faire une recherche du coté de AUTOCOMPLETION...
;O)
faire une recherche du coté de AUTOCOMPLETION...
;O)
gzen92
Messages postés
1
Date d'inscription
dimanche 29 décembre 2002
Statut
Membre
Dernière intervention
15 mars 2011
15 mars 2011 à 08:30
15 mars 2011 à 08:30
Je remets ce sujet à jour, car j'ai trouvé une solution alternative et sans AJAX ou DOM (je ne sais même pas ce que c'est !).
Moi j'ai d'abord enregistré la page google.fr et j'ai vu les 150 Ko de code javascript... Même après reformatage, c'est incompréhensible, pour moi en tout cas.
Alors j'ai réfléchi...
Je vais vous faire part de ma réflexion :
Pour Google, vu le nombre de possibilités de mots ou chaînes suggérés (des millions sans aucun doute), le script fait une requête au serveur afin d'actualiser cette liste à chaque frappe clavier.
Pour mon cas (et le votre peut-être), je n'ai que "quelques milliers" de valeurs. J'ai donc stocker toutes ces valeurs directement dans la page dans une partie javascript (via PHP et SQL) et à chaque saisie dans un champ "input", le champ "select" se modifie en conséquence à l'aide de javascript.
Alors c'est moins joli que Google, mais beaucoup plus simple à mettre en place.
Je vous donne une idée de code pour ceux qui n'auraient pas tout compris :
- récupération des valeurs dans une table SQL avec PHP (les valeurs affichées et les identifiant pour "value")
while(...){
$listeID .= "$valeur['id'], ";
$listeNom .= "$valeur['...'], ";
}
- création d'un tableau javascript et de la liste pour le "select"
<script language=javascript>
var tabID = new Array($listeID);
var tabNom = new Array($listeNom);
for(i=0; i<tabNom.length; i++){
document.forms.NOMFORM.NOMSELECT.options[document.forms.NOMFORM.NOMSELECT.options.length] = new Option(tabNom[i], tabID[i]);
</script>
- dans un "input" on rajoute un "onKeyUp=refaitTab()"
- dans cette fonction, on supprime tous les valeurs ou, astuce, on réduit leur nombre à 0 :)
document.forms.NOMFORM.NOMSELECT.options.length = 0;
- on recrée la liste comme on l'a crée mais en ne sélectionnant que les valeurs que l'on veut (méthode .indexOf() : chaîne appartient)
Moi j'ai d'abord enregistré la page google.fr et j'ai vu les 150 Ko de code javascript... Même après reformatage, c'est incompréhensible, pour moi en tout cas.
Alors j'ai réfléchi...
Je vais vous faire part de ma réflexion :
Pour Google, vu le nombre de possibilités de mots ou chaînes suggérés (des millions sans aucun doute), le script fait une requête au serveur afin d'actualiser cette liste à chaque frappe clavier.
Pour mon cas (et le votre peut-être), je n'ai que "quelques milliers" de valeurs. J'ai donc stocker toutes ces valeurs directement dans la page dans une partie javascript (via PHP et SQL) et à chaque saisie dans un champ "input", le champ "select" se modifie en conséquence à l'aide de javascript.
Alors c'est moins joli que Google, mais beaucoup plus simple à mettre en place.
Je vous donne une idée de code pour ceux qui n'auraient pas tout compris :
- récupération des valeurs dans une table SQL avec PHP (les valeurs affichées et les identifiant pour "value")
while(...){
$listeID .= "$valeur['id'], ";
$listeNom .= "$valeur['...'], ";
}
- création d'un tableau javascript et de la liste pour le "select"
<script language=javascript>
var tabID = new Array($listeID);
var tabNom = new Array($listeNom);
for(i=0; i<tabNom.length; i++){
document.forms.NOMFORM.NOMSELECT.options[document.forms.NOMFORM.NOMSELECT.options.length] = new Option(tabNom[i], tabID[i]);
</script>
- dans un "input" on rajoute un "onKeyUp=refaitTab()"
- dans cette fonction, on supprime tous les valeurs ou, astuce, on réduit leur nombre à 0 :)
document.forms.NOMFORM.NOMSELECT.options.length = 0;
- on recrée la liste comme on l'a crée mais en ne sélectionnant que les valeurs que l'on veut (méthode .indexOf() : chaîne appartient)
