11548 sujets

JavaScript, DOM et API Web HTML5

Accéder à une option de SELECT via une saisie de caractères [Résolu]

Bonjour,
J'ai un code html qui utilise un select. Ce select, qui contient des adresses clients, peut comporter jusqu'à 200 lignes (cf exemple ci-dessous).
J'aimerai que les utilisateurs puissent accéder directement à une des options et cela en tapant un ou des mots et ce quelle que soit la position du mot recherché dans l'option.
Exemple :
Vidéo - Société 1 - Groupe Soc - Rue des Ecoles - BP 15 - 49000 ANGERS
Incendie - Société 1 - Groupe Soc - Rue des Ecoles - BP 15 - 49000 ANGERS
Vidéo - Société 1 - Groupe Soc - Route de Paris - ZI - 45000 ORLEANS
Incendie - Société 1 - Groupe Soc - Route de Paris - ZI - 45000 ORLEANS
Incendie - Société 1 - Groupe Soc - Rue des Roses - ZI - 41000 BLOIS
Alarme - Société 2 - Groupe Soc - Avenue Road - 49000 ANGERS

Si l'utilisateur tape Paris, la 3ème ligne est "proposée". S'il tape BLOIS, l'avant-dernière ligne est "proposée".

La fonctionnalité existe déjà mais elle se limite à une recherche sur les premiers caractères des options.

D'avance merci pour votre aide
Modifié par DM49 (17 May 2011 - 09:39)
Bonjour,

Merci de corriger le titre de ton sujet (qui ne donne qu'une envie, et ce n'est pas de t'aider) afin de pleinement utiliser le potentiel de la minuscule.
Bonjour,

Pour obtenir ce que tu veux, tu vas devoir plonger les mains dans le cambouis et utiliser soit PHP (associé à une base de données), soit javascript.

Cordialement
Modifié par lddsoft (06 May 2011 - 09:25)
Bonjour lddsoft et merci pour les pistes fournies.

Malheureusement, celles-ci ne répondent pas vraiment à mes attentes.

Mon besoin est plus axé sur l'accès direct à une ligne (affichée dans un select HTML) suite à une saisie de caractères présents dans la ligne affichée.
J'aimerai pouvoir, quand la liste déroulante est affichée, saisir des caractères et ensuite "sélectionner" la ligne où ces caractères sont présents.

D'avance merci
Bonjour,

C'est presque ça hormis le fait que j'aimerai que la recherche se fasse sur les caractères saisis et ce quelle que soit leur position dans la ligne.

Si je reprends l'exemple que vous m'avez adressé.
Quand je tape T, on me propose Tavoularis, Terance
.... .....
Si je tape Te, il ne me propose pas cette ligne. Il ne propose quelque chose que si les caractères saisis débutent la ligne.
Existe-t-il une syntaxe pour lui dire : propose-moi la ou les lignes contenant telle chaîne de caractères ?
Modérateur
Celui-ci semble le faire.

Le mieux est de commencer par faire une recherche sur Google pour Autosuggest. Il en existe beaucoup avec des paramètres différents. Tu trouveras sans doute quelque chose qui est conforme à tes attentes.

Pour ma part, j'utilise celui-ci et il me sort bien les résultats contenant la séquence de caractères écrites, que ce soit au début, au milieu ou la fin du mot. Le script fait appel à un script côté serveur (PHP, Coldfusion, ASP) qui retourne les résultats par rapport à l'input. Les résultats retournés dépendre donc de ce script côté serveur que tu peux adapter.
Modifié par Tony Monast (10 May 2011 - 17:59)
Bonjour Tony Monast,

Merci pour ta réponse.

Celle-ci conviendrait bien à une saisie de texte mais ce n'est pas mon cas. Dans mon cas, j'ai une liste déroulante (jusqu'à 200 lignes) et c'est à l'intérieur de cette liste que je souhaite accéder rapidement à une ligne via une saisie de caractères.
Pour les besoins d'un site, j'ai écrit quelque chose qui ressemble à ta demande.

Je t'ai fais un exemple ici.

La liste est formée par un div avec overflow:scroll et la recherche est un bout de javascript qui se déclenche à chaque frappe dans la zone de recherche, puis parcours le contenu du div.
Pour chaque élément (une balise a) dont le texte contient ce qui a été tapé, il sera visible (display:block), sinon, il sera rendu invisible (display:none).

Il n'y a pas besoin de serveur (hormis pour générer la liste la première fois, ce qui sous-entend que le contenu entier de la liste doit être inclus dans la page html).
Modifié par MrBru (13 May 2011 - 16:29)
Bonjour,

@MrBru
Super ta source Smiley biggrin , je compte m'en servir personnellement, si tu le permets. Merci !

@DM49
Ce script devrait te combler, il me semble. Smiley smile
Bonjour MrBru,

Merci pour ce code mais il y a un mais ...
Je n'utilise pas de <a href car j'ai besoin de récupérer la valeur sélectionnée au travers de Value (dans l'exemple ci-dessous, je dois récupérer soit sit1 soit sit3).
Mon extrait de code est le suivant :
<select>
    <option value="sit1">adresse du site 1
    <option value="sit3">adresse du site 3
</select>

Je dois certainement me planter mais où ?
Bonjour DM49,

Le code de MrBru est pourtant très intéressant pour ce que tu désires faire !

Pourquoi ne pas récupérer la valeur sélectionnée en plaçant un onclick="..." dans la balise <a href="#" ...> et la traiter dans une fonction javascript appelée par ce onclick ?

Ce lien peut t'inspirer : http://www.generation-nt.com/recuperer-texte-lien-entraide-26345.html

Je te le disais dans mon premier post :"Il va falloir mettre les mains dans le cambouis et utiliser PHP ou javascript" !

A+
Modifié par lddsoft (14 May 2011 - 18:03)
DM49 a écrit :
Bonjour MrBru,

Merci pour ce code mais il y a un mais ...
Je n'utilise pas de &lt;a href car j'ai besoin de récupérer la valeur sélectionnée au travers de Value (dans l'exemple ci-dessous, je dois récupérer soit sit1 soit sit3).

Je dois certainement me planter mais où ?


Bonjour,

comme le dit lddsoft, le code devrait te combler.
Il faut parfois savoir modifier sa source quand on veut quelque chose qui n'est pas ordinaire.

Ici, il te faudra te débrouiller un peu, modifier ta façon de faire habituelle, et faire preuve d'un peu d'initiative et d'ingéniosité pour arriver à ce que tu souhaites.

Tu as maintenant toutes les cartes pour le faire, il ne faut pas rester bloquer à un " je veux un select " mais plutôt " comment je vais faire comme si c'était un select ". Un onclick ? Un rel ? Un id ? Un data-value ?
Amusons-nous !
Modifié par n3k0 (14 May 2011 - 18:05)
@DM49

Bonjour,

Si tu tiens absolument à utilser un select, voici ce que j'ai concocté pour toi. Cela fonctionne sous IE8 et Firefox 3.6.17. Les autres navigateurs ou versions n'ont pas été testés.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Recherche avancée dans un select</title>
    <script type="text/javascript">
//<![CDATA[
    /*_____ script original créé par lddsoft mai 2011 _____*/
    var i = 0;
    var LO = new Array();

    function init(){
        for(i=0; i<document.getElementById('liste').length; i++){
			LO[ i] = document.getElementById('liste').options[ i].text;
        }
    }

    function liste_complete(){
        document.getElementById('liste').length = 0; // vider la liste
        for(i=0; i<LO.length; i++){
			document.getElementById('liste').options[ i] = new Option(LO[ i],i);      
        }
    }

    function chercher(lettres){
        var LIST = document.getElementById('liste');
        if(lettres == ""){    // si le champ est vide, afficher toutes les options de départ
			liste_complete();
			return false;
        }
        var newliste = new Array();
        var x = -1;
        for(i=0; i<LIST.length; i++){
			if(LIST.options[ i].text.indexOf(lettres)!=-1){
					x++;
					newliste[x] = LIST.options[ i].text;
			}
        }
        if(x!=-1){ // si la(les) lettre(s) sont dans une(des) option(s)
			LIST.length = 0; // vider la liste
			for(i=0; i<newliste.length; i++){
			  LIST.options[ i] = new Option(newliste[ i],i);            
			}
        }
    }
    //]]>
    </script>
    <style type="text/css">
	/*<![CDATA[*/
        #liste {
			width: 250px;
			background: #fafafa;
			border: 1px solid gray
        }
    /*]]>*/
    </style>
  </head>
  <body onload="init();">
    <form id="formulaire" action="#" name="formulaire">
      <label for="entree">Rechercher:</label> 
	  <input type="text" id="entree" size="30" onkeyup="chercher(this.value);" />
	  <br /><br />
      <select id="liste" size="3" onchange="alert(this.options[selectedIndex].text);liste_complete()">
		<option value="0">Bruxelles 14H30</option>
		<option value="1">Paris 04H15</option>
		<option value="2">Londres 10H15</option>
		<option value="3">Madrid 08H45</option>
		<option value="4">Amsterdam 14H25</option>
		<option value="5">Lonjumeau 09H25</option>
		<option value="5">Lourdes 19H30</option>
      </select>
    </form>
  </body>
</html>

Modifié par lddsoft (15 May 2011 - 15:31)
lddsoft a écrit :
Bonjour,
@MrBru
Super ta source Smiley biggrin , je compte m'en servir personnellement, si tu le permets. Merci !

Je te le permets 1000 fois.


DM49 a écrit :
Bonjour MrBru,
Merci pour ce code mais il y a un mais ...
Je n'utilise pas de &lt;a href car j'ai besoin de récupérer la valeur sélectionnée au travers de Value (dans l'exemple ci-dessous, je dois récupérer soit sit1 soit sit3).
Mon extrait de code est le suivant :
<select>
    <option value="sit1">adresse du site 1
    <option value="sit3">adresse du site 3
</select>

Je dois certainement me planter mais où ?

Si tu as besoin d'un value, ne serait-ce pas que tu as un <form> quelque part ?
Dans ce cas, il suffit de modifier le href de chaque balise <a> pour y mettre un bout de javascript qui va alimenter le value d'un <input type="hidden"> avec la valeur que tu veux pour chaque élément de ta pseudo liste.
Bonjour lddsoft,

Merci pour ton code.
Je ne veux pas absolument utiliser SELECT mais juste trouver une solution à mon problème.
Ton code y répond très bien mais comme je n'ai jamais fait de java, je ne parviens pas à résoudre le problème suivant.
Dans ton exemple, tu as value="0", "1", "2" ....
En revanche dans mon cas, j'ai value="1500" "0800BA" "4000C" qui correspondent à des codes clients et qui me permettent d'accéder à une base de données. J'ai utilisé la commande 
this.options[SELECTedIndex].value)
mais rien n'y fait.
Pourrais-tu me mettre sur la piste ?

Merci
Bonjour,

DM49 a écrit :
Pourrais-tu me mettre sur la piste ?

Pas évident vu ton manque de connaissances en javascript (ne dis pas "java", c'est un tout autre langage! En abrégé pour "javascript", dis "js"!)
Ce n'est pas très compliqué, il suffit de créer un tableau pour y stocker les "values" des "options", comme j'ai fait pour les "text" et d'aller chercher ces "values" au moment voulu.
Je vais voir de mon côté ce que je peux faire, mais je n'ai pas trop le temps là...

A+
Voici sans doute ce que tu désires Smiley langue . Il y a moyen d'améliorer le code, j'ai fait cela assez rapidement. Teste-le pour voir!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Recherche avancée dans un select</title>
    <script type="text/javascript">
//<![CDATA[
    /*_____ script original créé par lddsoft mai 2011 _____*/
    var z = 0;
    var LO = new Array();
	var valeur = new Array();

    function init(){
        for(z=0; z<document.getElementById('liste').length; z++){
			LO[z] = document.getElementById('liste').options[z].text;
			valeur[z] = document.getElementById('liste').options[z].value;
        }
    }

    function liste_complete(){
        document.getElementById('liste').length = 0; // vider la liste
        for(z=0; z<LO.length; z++){
			document.getElementById('liste').options[z] = new Option(LO[z],valeur[z]);      
        }
    }

    function chercher(lettres){
        var LIST = document.getElementById('liste');
        if(lettres == ""){    // si le champ est vide, afficher toutes les options de départ
			liste_complete();
			return false;
        }
        var newliste = new Array();
		 var newvalue = new Array();
        var x = -1;
        for(z=0; z<LIST.length; z++){
			if(LIST.options[z].text.indexOf(lettres)!=-1){
					x++;
					newliste[x] = LIST.options[z].text;
					newvalue[x] = LIST.options[z].value;
			}
        }
        if(x!=-1){ // si la(les) lettre(s) sont dans une(des) option(s)
			LIST.length = 0; // vider la liste
			for(z=0; z<newliste.length; z++){
			  LIST.options[z] = new Option(newliste[z],newvalue[z]);            
			}
        }else{liste_complete();}
    }
	
	function vl(z){
		alert("Vous avez sélectionné :\n\n"+document.getElementById('liste').options[z].text+"\n\nLa valeur de la sélection est :\n\n"+document.getElementById('liste').options[z].value);
	}
    //]]>
    </script>
    <style type="text/css">
	/*<![CDATA[*/
        #liste {
			width: 250px;
			background: #fafafa;
			border: 1px solid gray
        }
    /*]]>*/
    </style>
  </head>
  <body onload="init();">
    <form id="formulaire" action="#" name="formulaire">
      <label for="entree">Rechercher:</label> 
	  <input type="text" id="entree" size="30" onkeyup="chercher(this.value);" />
	  <br /><br />
      <select id="liste" size="3" onchange="vl(selectedIndex);liste_complete()">
		<option value="1500">Bruxelles 14H30</option>
		<option value="0800BA">Paris 04H15</option>
		<option value="4000C">Londres 10H15</option>
		<option value="520CV">Madrid 08H45</option>
		<option value="4630M">Amsterdam 14H25</option>
		<option value="1810">Lonjumeau 09H25</option>
		<option value="MP001">Lourdes 19H30</option>
      </select>
    </form>
  </body>
</html>

N.B.: j'ai remplacé la variable i par la variable z, car [ i] pose problème avec le BBcode de ce forum.
Modifié par lddsoft (16 May 2011 - 19:58)
Bonjour lddsoft,

Ca fonctionne super bien.
Encore merci pour ton aide.

Bonne journée
Sujet clos
Aller à