Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

suggestion dans un input text

32 réponses
Avatar
unbewusst.sein
je souhaiterait ajouter une suggestion dans un input text.

je m'explique, j'ai donc dans une form un input type="text" qui sert à
régler une couleur.

si la personne commence par # c'est un code de couleur hexa, pas de
suggestion.

par ailleurs dans mon toolkit j'ai une Array(147) qui contient comme clé
le nom d'une couleur et comme valeur, le code correspondant (sous forme
rgb(xxx,yyy,zzz))

donc je souhaiterait si une personne au lieu d'entrer comme premier
caractère "#" entre, par exemple "a" lui suggérer "aliceblue" et si la
personne continue avec "z" donc "az" lui suggérer "azure" etc...

j'imagine que ça existe tout fait ça non ?

enfin qq'un a déjà réalisé ce genre de truc ?

--
Une Bévue

10 réponses

1 2 3 4
Avatar
ASM
je souhaiterait ajouter une suggestion dans un input text.

je m'explique, j'ai donc dans une form un input type="text" qui sert à
régler une couleur.

si la personne commence par # c'est un code de couleur hexa, pas de
suggestion.

par ailleurs dans mon toolkit j'ai une Array(147) qui contient comme clé
le nom d'une couleur et comme valeur, le code correspondant (sous forme
rgb(xxx,yyy,zzz))

donc je souhaiterait si une personne au lieu d'entrer comme premier
caractère "#" entre, par exemple "a" lui suggérer "aliceblue" et si la
personne continue avec "z" donc "az" lui suggérer "azure" etc...

j'imagine que ça existe tout fait ça non ?

enfin qq'un a déjà réalisé ce genre de truc ?


c'est ni rien que moins qu'une boucle sur la clé de l'array

<html>
<script type="text/javascript">
var coul = new Array();
coul['aliceblue'] = '240,248,255';
coul['antiquewhite'] = '250,235,215';
coul['aqua'] = '0,255,255';
coul['aquamarine'] = '127,255,212';
coul['azure'] = '240,255,255';
coul['beige'] = '245,245,220';
coul['bisque'] = '255,228,196';

function sub() {
var v = document.form1.txt1.value;
var s = '';
for(i in coul) {
if(i.indexOf(v)>=0) s += i+' : rvb('+coul[i]+')<br>';
}
document.getElementById('inf').innerHTML = s;
}
</script>
<form name="form1">
<input name="txt1" onkeyUp="sub();">
</form>
<p id=inf></p>
</html>


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Avatar
Elegie
Une Bévue wrote:

Hello,

donc je souhaiterait si une personne au lieu d'entrer comme premier
caractère "#" entre, par exemple "a" lui suggérer "aliceblue" et si la
personne continue avec "z" donc "az" lui suggérer "azure" etc...

j'imagine que ça existe tout fait ça non ?

enfin qq'un a déjà réalisé ce genre de truc ?


Oui, plus ou moins :)

<URL:http://groups.google.fr/group/comp.lang.javascript/msg/ecfed36c8f308c3b>


Cheers,
Elegie.

Avatar
unbewusst.sein
ASM wrote:


c'est ni rien que moins qu'une boucle sur la clé de l'array


ça merci, ce n'est pas le pb ))

<html>
<script type="text/javascript">
var coul = new Array();
coul['aliceblue'] = '240,248,255';
coul['antiquewhite'] = '250,235,215';
coul['aqua'] = '0,255,255';
coul['aquamarine'] = '127,255,212';
coul['azure'] = '240,255,255';
coul['beige'] = '245,245,220';
coul['bisque'] = '255,228,196';

function sub() {
var v = document.form1.txt1.value;
var s = '';
for(i in coul) {
if(i.indexOf(v)>=0) s += i+' : rvb('+coul[i]+')<br>';
}
document.getElementById('inf').innerHTML = s;
}
</script>
<form name="form1">
<input name="txt1" onkeyUp="sub();">



la personne n'est pas nécessairement d'accord avec le premier choix
venu, il faut donc gérer, a minima, le backspace...
--
Une Bévue

Avatar
unbewusst.sein
Elegie wrote:

enfin qq'un a déjà réalisé ce genre de truc ?


Oui, plus ou moins :)

<URL:http://groups.google.fr/group/comp.lang.javascript/msg/ecfed36c8f308c3b>


OK, merci, je vais pouvoir me débrouiller avec ça !
--
Une Bévue


Avatar
ASM
ASM wrote:

c'est ni rien que moins qu'une boucle sur la clé de l'array


ça merci, ce n'est pas le pb ))


alors où est le pb ?

tu as perdu ton truc spécial d'imput + select ?

il ne reste qu'à y adapter la boucle.


function sub() {
var v = document.form1.txt1.value;
var s = document.form1.select1;
s.options.length = 0;
for(i in coul)
if(v!='' && i.toString().indexOf(v)==0)
{
var o = new Option(i, 'rvb('+coul[i]+')');
s.options[s.length] = o;
}
s.size=s.length+1;
}
</script>
<form name="form1">
<input name="txt1" onkeyUp="sub();"><br>
<select name="select1"
onclick="txt1.value=this.options[this.selectedIndex].value;
this.form.style.backgroundColor=this.options[this.selectedIndex].text;">
</select>
</form>


la personne n'est pas nécessairement d'accord avec le premier choix
venu, il faut donc gérer, a minima, le backspace...


Paske dans l'exemple simpliste donné il n'est pas géré ?
Ce ne m'a pas semblé.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé


Avatar
ASM
Elegie wrote:

<URL:http://groups.google.fr/group/comp.lang.javascript/msg/ecfed36c8f308c3b>


OK, merci, je vais pouvoir me débrouiller avec ça !


curieux : le backspace n'y a aucun effet chez moi ...

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé


Avatar
Elegie
ASM wrote:

<URL:http://groups.google.fr/group/comp.lang.javascript/msg/ecfed36c8f308c3b>


OK, merci, je vais pouvoir me débrouiller avec ça !


curieux : le backspace n'y a aucun effet chez moi ...


Non en effet, et cela est lié, en fait, à la nature même du script.

Il me semble qu'il existe (au moins) deux formes d'autocomplete: soit la
suggestion est rajoutée directement dans l'espace de saisie, soit elle
est proposée dans une liste déroulante, non loin de l'espace de saisie.

Chacune de ces approches possède ses avantages et inconvénients; j'ai
sélectionné la première car il me semblait alors qu'elle répondait mieux
aux attentes du demandeur. De plus, le "challenge" était plus
intéressant, car faisant appel à des domaines peu connus du DOM (les
Ranges).

Lors de l'implémentation, l'identification des évènements sur lesquels
la suggestion doit être proposée m'a fait aborder la question du
BACKSPACE. J'ai alors estimé non intuitif de maintenir du texte
sélectionné, alors que l'utilisateur venait d'en supprimer (d'où le
comportement observé). Je pense qu'avec l'autre approche citée, j'aurais
probablement, effectivement, regénéré une suggestion.


Cheers,
Elegie.



Avatar
ASM
ASM wrote:

<URL:http://groups.google.fr/group/comp.lang.javascript/msg/ecfed36c8f308c3b>



curieux : le backspace n'y a aucun effet chez moi ...


Non en effet, et cela est lié, en fait, à la nature même du script.

Il me semble qu'il existe (au moins) deux formes d'autocomplete: soit la
suggestion est rajoutée directement dans l'espace de saisie, soit elle
est proposée dans une liste déroulante, non loin de l'espace de saisie.


et comme Yvon (Une Bévue) il y a qques temps avait cherché et trouvé un
système mélangeant champ de texte et liste déroulante, je pensais qu'il
voulait l'adapter.

Chacune de ces approches possède ses avantages et inconvénients; j'ai
sélectionné la première car il me semblait alors qu'elle répondait mieux
aux attentes du demandeur. De plus, le "challenge" était plus
intéressant, car faisant appel à des domaines peu connus du DOM (les
Ranges).


Oui, oui, vu (reste encore à étudier)
Ce serait tt de même bien que le JS nous offre une fonction native de
selection en get et en set et qu'on n'ai plus à se battre avec ces range
start étoussa.
(je vois ça du bout de ma lorgnette sans avoir étudié la question)

Lors de l'implémentation, l'identification des évènements sur lesquels
la suggestion doit être proposée m'a fait aborder la question du
BACKSPACE. J'ai alors estimé non intuitif de maintenir du texte
sélectionné, alors que l'utilisateur venait d'en supprimer (d'où le
comportement observé).


Le backspace supprime bien les caractères (et l'autocomplétion déjà
affichée) mais interrompt l'autocomplétion sur la chaîne restante, il
faut retaper un caractère pour qu'elle reprenne (j'ai entrevu dans le
code que ce pouvait être voulu).

Je pense qu'avec l'autre approche citée, j'aurais
probablement, effectivement, regénéré une suggestion.


Je n'ai pas bien compris pourquoi ici ce n'est pas le cas.

De plus le truc ne fonctionnerait que sur les 2 premières lettres du mot
(à ce que j'ai cru voir), sera-ce suffisant pour le tableau des 147
couleurs par leurs noms ?


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé




Avatar
unbewusst.sein
ASM wrote:


tu as perdu ton truc spécial d'imput + select ?


non, pas du tout, je "pense" l'avoir incorporé dans mon toolkit :

en fait en ce moment, je fais le ménage et revois tous mes scripts pour
les incorporer dans mon toolkit.

je pense que la suggestion c'est différent de l'input + select.

mais bon je verrai en fin de course, si je peux faire d'une pierre deux
coups.


il ne reste qu'à y adapter la boucle.


<snip />

la personne n'est pas nécessairement d'accord avec le premier choix
venu, il faut donc gérer, a minima, le backspace...


Paske dans l'exemple simpliste donné il n'est pas géré ?
Ce ne m'a pas semblé.


bon, je viens juste de l'essayé, le backspace marche mais pas
correctement.

je m'explique :

j'entre "a", ça me trouve donc la première couleur commençant par "a"
soit "aliceblue", si ce que je souhaite est "aqua", je ne peux
l'atteindre (en tk avec FF2) car le script me recolle aussi sec
"aliceblue" donc je n'arrive pas à entrer "aq" pour choisir aqua, par
ex.

bon mais ton script m'a donné une idée car je ne procédais pas du tout
comme ton script.

comment je procédais :

je détecte les onkeypress :

document.onkeypress=suggest; //suggest est l'équivalent de ton sub()

ensuite je prends :

var kcode=getKeyCode(e);
var kchar=getKeyCharFromKeyCode(kcode);

là par un :

if(kcode === 8) je détecte le backspace et agi en conséquence.

le backspace et la suggestion marchent très bien dans mon cas, excepté
un BIG BEMOL )))) :

le caractère entré par l'utilisateur se retrouve en fin de chaine par
ex:

le gars (en fait moi) a entré a
la suggestion donne donc aliceblue normal,
par backspace je reviens au a et entre en q pour espérer obtenir aqua

ben c'est là le bémol car j'obtiens, avec mon script :

aquaq
----^

donc la suggestion dans mon cas agit avant l'entrée du caractère et ce
dernier caractère "q" je n'arrive pas à le supprimer même s'il m'a servi
pour choisir "aqua" dans la liste des couleurs nommées.


MAIS? et c'est là où tu me donne une idée, toi tu a choisi l'event
keyup, alors que j'avais choisi keypress, c'est sans doute-là mon erreur
car, j'imagine qu'avec keyup, dans l'exemple précédent, le "q" entré par
l'utilisateur sera entré d'abord dans l'input text et la suggestion
viendra après...

je ne devrais plus me retrouver avec aquaq, c'est ce que j'espère et ce
que je vais tester derechef ce samedi matin de bonne humeur )))
--
Une Bévue


Avatar
unbewusst.sein
Une Bévue wrote:


je ne devrais plus me retrouver avec aquaq, c'est ce que j'espère et ce
que je vais tester derechef ce samedi matin de bonne humeur )))


BON, j'ai donc amélioré mon script, le code est sans doute encore trop
brouillon mais il me semble que ça commence à marcher comme je le
souhaite.

un exemple ($ donne entrée utilisateur avec "<-" symbolisant le
backspace, => donne résultat) :

$ b
=> beige

$ b<-
=> b

$ bl
=> black

$ bl<-
=> bl

$ bl<-u
=> blue

$ bl<-uv
=> blueviolet

$ bl<-uv<-
=> bluev

$ bl<-uv<-<-
=> blue

$ bl<-uv<-<-<-
=> blu

$ bl<-uv<-<-<-<-
=> bl

$ bl<-uv<-<-<-<-<-
=> b

$ bl<-uv<-<-<-<-<-u
=> burlywood

BON, ce serait bien si tu testais (il vaut mieux qu'une autre pers. que
moi teste)

c'est à la page :

<http://81.57.96.20/DHTML/transparency.xhtml>

(je n'ai pas rnouvelé mon domain chez gandi car je souhaite changer de
nom)

bien sûr si tu click sur "Run!" ça change les couleurs, là j'ai un algo
qui "accroche" les couleurs de la page à une seule couleur soit la
couleur de fond où se trouve le menu.


--
Une Bévue

1 2 3 4