Discussion :

[florianjin]

Bonjour,
Je souhaite faire un "datalist", avec un javascript qui va récupérer l'information sélectionné dans la "datalist", puis va l'envoyer dans l'input "caseinfo"
Je ne veux pas que l'information transite par l'input "browser" pour l'envoyer sur "caseinfo"
Si je met un "onchange" sur l'input browser, si la personne a décidé d'être prise de tête, elle pourra envoyer une autre info que ce qui est dans "datalist" dans "caseinfo".

un simple select n'est pas possible, dans "datalist" il y a 30 000infos, l'utilisateur va devoir chercher un heure la bonne info.
J'ai testé pas mal de truc, mais je n'arrive pas à comprendre pourquoi cela ne fonctionne pas.

Un des exemples de test, celui qui me semblait le plus logique.
donc si je commence a écrire "F" cela me permet de cliquer sur "Firefox", je veux que l'information aille dans "caseinfo"
Je ne veux pas que, si la personne marque "bidulemachin", l'information aille dans "caseinfo"


Merci d'avance pour l'aide éventuel.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<input list="browsers" name="browser" id="browser">
 
<datalist id="browsers"  onchange="envoinfo()">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
 
 
<input type="text"   id="caseinfo">

javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function envoinfo() 
{
 
var val=document.getElementById("browsers").options[document.getElementById("browsers").selectedIndex].value;
document.getElementById("caseinfo").value=val;
 
}

[NoSmoking]

Bonjour,
il te faut récupérer la value de l'élément <input list="browsers" name="browser" id="browser"> et faire les vérifications à partir de celle-ci.

[florianjin]

Pour la vérifier, il faudrait que j'envoi la liste du datalist sur le javascript.
C'est possible de récupérer l'information?

Envoyer le tableau de 30 000données sur javascript, pour vérifier que l'information envoyé est bien dans le tableau, cela me semble très lourd.
Comparé a envoyer directement l'information cliqué la ou on veut.

Il n'y a vraiment pas d'autre solution, ou c'est juste une idée?

[NoSmoking]

Pour la vérifier, il faudrait que j'envoi la liste du datalist sur le javascript.
C'est possible de récupérer l'information?

Il faut savoir que :

• L'événement onchange sur un élément <datalist> n'est pas pris en compte
• On ne peut pas récupérer la valeur d'un élément <datalist>

Cependant, récupérer et vérifier que l'information saisie est contenue dans les datas de la <datalist> est tout à fait faisable.

En repartant de ton code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="text"   id="caseinfo">

on pourrait faire avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function existInDatalist(idDatalist, value) {
  const elemDataList = document.getElementById(idDatalist);
  return elemDataList.querySelector("option[value='" + value + "']");
}
 
const oInput = document.getElementById("browser");
oInput.addEventListener("input", function() {
  const exist = existInDatalist(this.getAttribute("list"), this.value);
  document.getElementById("caseinfo").value = exist ? this.value : "...";
})

Envoyer le tableau de 30 000données sur javascript, pour vérifier que l'information envoyé est bien dans le tableau, cela me semble très lourd.
Comparé a envoyer directement l'information cliqué la ou on veut.

Effectivement il faudrait tester en terme d'efficacité, le préchargement des 30000 données n'étant pas forcément judicieux.

Une autre approche serait de revoir la hiérarchisation des données si c'est possible.

[florianjin]

Ok merci pour l'information.
La hiérarchisation des données n'est pas possible, elle rajouterai une étape qui n'est pas pratique.
Sur le principe j'ai d'autre solution, mais elles ont toute leur défaut, "datalist" était clairement le plus simple, c'est une alternative au "select" qui ne supporte pas les 30K.
L'objectif était de bloquer l'utilisateur con, sans embêter l'utilisateur normal.


Même si 95% des utilisateurs font ce qu'il faut, certain cherchent toujours a gruger le système.
A chaque fois c'est simple de voir l'arnaque, mais cela implique du temps de perdu inutilement, avec des conversations lunaire à n'en pas finir.


La je vais partir, ou sur de l'ajax, ou sur une étape de vérification.

[Doksuri]

je pense qu'a ce stade (30k infos) il est preferable de les garder en variable, et je faire une autocompletion