Estoy tratando de crear un elemento de entrada en JS y adjuntarle el atributo (lista) usando (setAttribute). Luego creó una lista de datos y obtuvo valores de datos de la base de datos (dos columnas: especie y género) como se muestra en el código PHP. El problema es que el elemento de entrada no muestra ninguno de los valores de datos recuperados.
<html> <head> <title>Sample Page</title> </head> <script> function createInput(){ var container = document.getElementById("chatcontainer"); var input = document.createElement("input"); input.type = "text"; input.setAttribute("name", "inputTest"); input.setAttribute("placeholder", "Enter Text"); input.required = true; input.setAttribute("list", "termList"); input.setAttribute("style", "width:20%;"); container.appendChild(input); } </script> </head> <body> <div class="container" id="chatcontainer"> <button class="btn fa fa-plus-circle" onclick="createInput()"> Create an input field</button> <datalist id="termList"> <?php require "db_connect.php"; // Database Connection $d_list="(select species as Term from bioset) union (select distinct genus from bioset)"; foreach ($conn->query($d_list) as $row) { echo "<option>"; echo $row['Term']; echo "</option>"; } ?> </datalist> </div> </body> </html>La forma en que lo hace parece funcionar, por lo tanto, esto significa que el error no está en este código.
function createInput() { var container = document.getElementById("chatcontainer"); var input = document.createElement("input"); input.type = "text"; input.setAttribute("name", "inputTest"); input.setAttribute("placeholder", "Enter Text"); input.required = true; input.setAttribute("list", "termList"); input.setAttribute("style", "width:20%;"); container.appendChild(input); } <div id="chatcontainer"> <button onclick="createInput()"> Create an input field</button> <datalist id="termList"> <option value="Chocolate"> <option value="Coconut"> <option value="Mint"> <option value="Strawberry"> <option value="Vanilla"> </datalist> </div>