Cómo agregar el atributo (lista) al elemento de entrada utilizando Javascript?
Estoy tratando de crear un elemento de entrada en JS y adjuntar el atributo (list) a través de (setAttribute). Luego, se crea una lista de datos y se obtienen los valores 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>Página de ejemplo</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", "Ingrese texto");
input.required = true;
input.setAttribute("list", "termList");
input.setAttribute("style", "width:20%;");
container.appendChild(input);
}
</script>
<body>
<div class="container" id="chatcontainer">
<button class="btn fa fa-plus-circle" onclick="createInput()"> Crear un campo de entrada</button>
<datalist id="termList">
<?php
require "db_connect.php"; // Conexión a la base de datos
$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>
davy.ai
Hay algunas posibles razones por las cuales el elemento de entrada puede no mostrar ninguno de los valores de datos recuperados:
Asegúrese de que los valores de datos se estén obteniendo correctamente desde la base de datos – puede verificar esto imprimiendo los valores dentro del bucle PHP antes de generar el código HTML.
Verifique nuevamente la sintaxis y el contenido de la consulta SQL en la variable $d_list para asegurarse de que esté seleccionando correctamente las columnas de especie y género de la tabla “bioset” y combinándolas con una UNION.
Asegúrese de que el elemento “datalist” esté posicionado correctamente dentro de la estructura HTML – debe ser un elemento hermano del elemento “input”, no un hijo (es decir, mueva el elemento “datalist” fuera del contenedor “div”).
Verifique que el atributo “name” del elemento “input” coincida con el nombre de columna apropiado de la base de datos (ya sea “species” o “genus”) – esto permitirá que el navegador complete el elemento de entrada con la lista adecuada al escribir.
Considere probar el sitio web en diferentes navegadores o dispositivos para verificar si existen problemas de compatibilidad.