Datalist (HTML) non compatible avec JavaScript

Résolu/Fermé

Clem - 2 mai 2022 à 14:13
Clem - 3 mai 2022 à 13:53

Bonjour,

Je cherche a écrire une application de recherche de courses dans une base de données a partir d'une plage de temps délimitée par deux dates (dates de début et de fin) et d'une catégorie de course (identifiée par un id, les id sont des chaines alphanumériques).

J'ai d'une part une datalist HTML qui permet de proposer une autocomplétion à l'utilisateur (liée aux input de texte par id=""liste")
et d'autre part un script JavaScript qui ajoute lesdits input de texte les uns à la suite des autres lorsque l'utilisateur appuie sur un bouton (pour lancer une recherche simultanément sur plusieurs type de course)

Pb : l’autocomplétion fonctionne sur les deux inputs que j'ai mis par défaut, mais pas sur ceux rajoutés par le script.
Avez vous une idée ?
Je suspecte une incohérence dans l'ordre d’exécution de mon programme mais je n'arrive pas à mettre le doigt dessus.

Merci par avance pour vos idées


<!DOCTYPE html>
<html>

<?php
require_once ("../data/Variables.php");
require_once ("../template/header.php");
require_once ("../template/menu.php");
require_once ("../Model/importConfig.php");
require_once("../Model/importTickets.php"); 
?>

<header>
    <h1> Recherche par course </h1>  
</header>	

<body>
<section>

<?php	
$listecourse = listecourse($loginBDD);
## Retourne un tableau contenant tout les id de courses possibles  
?>
	<p>
		<datalist id="course">
			<?php
				$liste = '';
				foreach ($listecourse as $course) {
					echo '<option value="'.$course[0].'">
					';			
				}
				echo $liste;
			?>
		</datalist>
	</p>
<form method='post' action="../controller/traitement.php">
	<p>
	Liste des courses à rechercher :
		<ul id="liste">
    		<li><input list="course" type="text" name="courseSelect1" id="inputcourse" value="1"><input type="button" value="x" onclick="suppr(this);"/></li>
    		<li><input list="course" type="text" name="courseSelect2" id="inputcourse" value="2"><input type="button" value="x" onclick="suppr(this);"/></li>
		</ul>
		<input type="button" value="ajouter" onclick="ajout();"/>
	</p>
	
	<p>
 		<label>Date de Début (JJ/MM/AAAA HH:MM) :
    		<input type="date" name="datedeb" id="datedeb" required pattern="\d{2}/\d{2}/\d{4}"> 
    		<input type="time" name="heuredeb" id="heuredeb" required>
    		<span class="validity"></span>
  		</label>
	</p>
	<p>
		<label>Date de Fin (JJ/MM/AAAA):
    	<input type="date" name="datefin" value = "09/12/21" required pattern="\d{2}/\d{2}/\d{4}">
    	<input type="time" name="heurefin" id="heurefin" required >
    	<span class="validity"></span>
  		</label>
  	</p>
	<p>
    	<button class="button" type="submit" name="coursedebfin">Rechercher</button>
 	</p>
</form>

<script>
var liste;
var compteur=2;

window.onload = function(){
    liste = document.getElementById("liste");
}

function getCompteur(){
	return compteur;
}

function ajout(){
    compteur = compteur+1;

  	var newL = document.createElement("li");
    
    var text = document.createElement("input");
    text.list = "course";
    text.type = "text";
    text.name=compteur;
    text.id="inputcourse";
    newL.appendChild(text);
    
    var bouton = document.createElement("input");
    bouton.type = "button";
    bouton.onclick = function(){
        suppr(this);
    }
    bouton.value = "x";
    newL.appendChild(bouton);
     
    liste.appendChild(newL);
}
 
function suppr(bouton){
    if(document.getElementsByTagName("li").length > 1){
        liste.removeChild(bouton.parentNode);
    }
    else{
        alert("Plus d element");
    }
}
</script>

</section>

<?php require_once ("../template/footer.php");
?>

</body>
</html>.

Configuration: Windows / Firefox 78.0

A voir également:

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
3 mai 2022 à 13:05

Bonjour,

Utilise l'inspecteur d'élément dans les outils de développement du navigateur pour voir le code html des input ajoutés via le script, tu devrais voir que l'attribut list n'est pas défini pour ces input.
Il faut en effet utiliser la méthode setAttribute pour définir cet attribut :

// text.list = "course";
text.setAttribute('list', 'course');

Réponse 2 / 2

Clem
3 mai 2022 à 13:53

Bonjour,

Merci pour votre réponse, utiliser la bonne méthode solutionne effectivement le problème, de même pour affecter une valeur aux autres champs. J'imagine que l'attribut "text"" est la seule valeur par défaut, ce qui explique que les inputs soit tout de même visible.
Merci beaucoup de ton aide

Problème résolu !

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

Cheval de Troie JS/Kryptik.I

'JS/Agent.TS' Qu'est ce que c'est ?

Arrondir nombre Math.round

remplir une case de tableau avec une couleur grise avec texture de pointillés