Menu deroulant html et selection
BOURGUI
Messages postés
46
Statut
Membre
-
Manu -
Manu -
j'effectue des requete mysql a travers une interface html. Jusque là pad de pb. Par contre je cherche un moyen pour qu'un menu deroulant puis être également utilisé comme champ de saisie. Je m'explique:
Je possede un menu déroulant possédant un grand nombre de donnée. Pour facilité la vie a mes utilisateur je voudrai quand saisissant les premières lettres de la donnée à rechercher celle ci s'affiche.
Merci d'avance pour vos tuyaux
Je possede un menu déroulant possédant un grand nombre de donnée. Pour facilité la vie a mes utilisateur je voudrai quand saisissant les premières lettres de la donnée à rechercher celle ci s'affiche.
Merci d'avance pour vos tuyaux
2 réponses
-
Salut,
voici un script qui détecte qu'une touche du clavier a été préssé :
<head>
<script language="JavaScript1.2"><!--
function netscapeKeyPress(e) {
alert('La touche utilisé a pour code : ' + e.which);
}
function microsoftKeyPress() {
alert('La touche utilisé a pour code : ' + window.event.keyCode);
}
if (navigator.appName == 'Netscape') {
window.captureEvents(Event.KEYPRESS);
window.onKeyPress = netscapeKeyPress;
}
//--></script>
</head>
<body onKeyPress="microsoftKeyPress()">
</body> -
Salut,
J'avais le même problème, je t'explique comment je l'ai solutionné:
D'abord, j'ai mis dans un tableau toutes les infos qui m'interesse dans un tableau au chargement de la page:
Dans le head de la page :
<script type="text/javascript">
tabLibelle = new Array() ;
// Création d'un tableau javascript contenant en index 0 le libelle, 1 l'unite1, 2 u2, 3 le code act et 4 le numéro de compte
<%
Dim cpteur, contenu
cpteur = 0
Do while not objRS.EOF
contenu = """" &objRS("Libelle_com")& """, """ &objRS("Unite1_com")& """, """ &objRS("Unite2_com")& """, """ &objRS("CodeActivite_act")& """, """ &objRS("NumeroCompte_com")& """"
%>
tabLibelle[<%= cpteur %>] = [<%= contenu %>] ;
<%
cpteur = cpteur + 1
objRS.MoveNext
loop
%>
C'est un tableau javascript fait avec une boucle ASP, on doit pouvoir faire pareil avec du PHP.
Ensuite je met un input type text à l'endroit de la liste déroulante et sur le onblur, j'ai mis une fonction qui, s'il y a la touche étoile, envoie une fonction qui recherche dans le tableau toutes les valeurs commençant par ce que l'utilisateur a tapé avant la touche étoile et je remplace le input text par un select à l'aide du DOM. ça ressemble à ça :
function compter(event) {
var eSrc=(document.all)?event.srcElement:event.target; // pointe sur l'input qui appelle la fonction, celui qui devra être transformé si besoin
//récupération de la valeur
var valeur = eSrc.value;
// on regarde si il y a *, ce qui signifie qu'il faut une aide à la saisie du numéro de comtpe
var reg = new RegExp ("[*]", "g");
var test1 = valeur.search(reg)
// si la recherce donne quelque chose, j'envoie la fonction transform(note que moi j'ai fait avec deux fonctions parce que j'en avais besoin mais tu peux mettre dans la même fonction
if (test1 != -1) {
var resultat = valeur.split(reg); // le split me met dans un tableau ce qu'il y a avant l'*
transform(eSrc, resultat[0]);
}
et maintenant la fonction transform :
function transform(elt, valeur){
var i;
var td = elt.parentNode;// pointe sur la cellule contenant le input à transformer
// On transforme tabLibelle (mon tableau du début) en grande chaine de caractère
var chaine = tabLibelle.join(",");
// on fabrique l'expression à rechercher composée des chiffres précédent l'étoile et de n'importe quelles autres caractères.
//La seule obligation est qu'il y en ait (8-nbr de caractère déjà entrés)
var x = valeur.length;
x = 8 - x
var expression = valeur+"{1}\\d{"+x+"}"
var reg = new RegExp(expression, "gi");
// On met tous les comptes correspondant à la recherche dans le tableau resultat
var resultat = chaine.match(reg);
if(resultat){
// Création du select ayant les même propriétés que l'input text qu'il va remplacer
var list=document.createElement('select');
list.name = elt.name;
list.id = elt.id;
list.tabIndex = elt.getAttribute('tabIndex');
// on y attache les mêmes fonctions qu'avait mon input
if(document.all){
list.attachEvent("onblur", libelle);
list.attachEvent("onblur", compter); // methode pour IE
list.attachEvent("onblur", ventillation);
}
else {
list.addEventListener("blur", libelle, true);
list.addEventListener("blur", compter, true); // methode pour Mozilla et consor
list.addEventListener("blur", ventillation, true);
}
td.replaceChild(list,elt); // on remplace elt (=input) par list (=select)
// on fait une boucle ajoutant les options, à partir du tableau resultat
i = 0;
while(i < resultat.length){
nouveau = new Option(resultat[i], resultat[i]);// dans mon cas, ce qui est affiché a la même valeur que la valeur qui doit être envoyé lors du submit, mais on peut faire différemment si besoin
list.options[list.length] = nouveau;
i ++;
}
td.childNodes[0].focus(); // on redonne le focus au select
}
else{
alert('Aucun compte ne correspond à votre demande');
elt.value = "";
elt.focus();
}
}
Et voilà! j'espère que ça pourra t'aider! Note que si tu avais trouvé un moyen plus simple, je suis preneur du tuyo!
A plus
