[SOLUCIONADO] live search php

pilucho · #31 (**permalink**) 02/04/2021, 16:45

Cita:

Iniciado por Alexis88

¿Le colocaste los símbolos de apertura y cerrado del código PHP? Sé que es una pregunta más que básica, pero puede ser que eso se te esté pasando.

Tiene que ser así:

Código PHP:

Ver original<?php
$mysqli = new mysqli('localhost', 'root', '', 'testing');
 
if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
 
$dato = $mysqli->real_escape_string($_GET['term']);
$query = "SELECT nombre FROM buscar WHERE nombre LIKE '%$dato%'";
$results = $mysqli->query($query) or exit($mysqli->errno . ': ' . $mysqli->error);
$respuesta = [];
 
if ($results->num_rows){
    while ($rows = $results->fetch_assoc()){
        $respuesta[] = ['nombre' => $rows['nombre']];
    }
}
 
echo json_encode($respuesta);
?>

Si todo está como se indica, tiene que funcionar exactamente como en el ejemplo en línea que te dejé como enlace en la respuesta anterior.

Por favor, no te olvides de mostrar el mensaje de error en la consola del navegador si sigue sin funcionarte.

No toque nada y solito funciono y compare que lo ultimo codigo y esta igual, muy extraño que estaba igual no funcionaba ahora si.

pero tengo una duda quize que funcione con mas nombres de este modo pero no funciono.

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Buscador</title>
</head>
<body>
    <form>
        <section>
            <label>Buscar por nombre:</label>
            <input type="search" name="buscar" autofocus />
        </section>
 
        <section>
            <label>Resultado seleccionado:</label>
            <input type="text" name="nombre" readOnly />
            <input type="text" name="apellido" readOnly />
        </section>
    </form>
 
    <script type="text/javascript" src="autocomplete-5.0.js"></script>
    <script type="text/javascript" src="codescript.js"></script>
</body>
</html>

Código Javascript:

Ver originallet inputBuscar = document.querySelector("[name=buscar]"),
    inputFinal = document.querySelector("[name=nombre]"),
    inputFinal = document.querySelector("[name=apellido]"),
    auto = new autocomplete();
 
auto.load({
    words: "buscar.php",
    target: inputBuscar,
    value: "nombre",
    value: "apellido",
    async: true,
    select: function(data){
        inputFinal.value = data.nombre;
    }
});

Código PHP:

Ver original<?php
 
$mysqli = new mysqli('localhost', 'root', '', 'testing');
 
if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
 
$dato = $mysqli->real_escape_string($_GET['term']);
$query = "SELECT * FROM buscar WHERE nombre LIKE '%$dato%'";
$results = $mysqli->query($query) or exit($mysqli->errno . ': ' . $mysqli->error);
$respuesta = [];
 
if ($results->num_rows){
    while ($rows = $results->fetch_assoc()){
        $respuesta[] = ['nombre' => $rows['nombre']];
        $respuesta[] = ['apellido' => $rows['apellido']];
    }
}
 
echo json_encode($respuesta);
?>

Alexis88 · #32 (**permalink**) 02/04/2021, 17:25

Si lo que deseas es tomar más datos desde la consulta y establecerlos en otras cajas de texto, solo necesitas hacer lo siguiente:

Supongamos que, además del nombre, se va a tomar el apellido, y quiero colocar dicho dato en otro campo, primero necesito tomarlo a partir de su identificador; luego, en el método select establezco los valores que retorna la consulta en los respectivos campos.

Código HTML:

Ver original<form>
    <section>
        <label>Buscar por nombre:</label>
        <input type="search" name="buscar" autofocus />
    </section>
 
    <section>
        <label>Resultados seleccionados:</label>
        <input type="text" name="nombre" readOnly />
        <input type="text" name="apellido" readOnly />
    </section>
</form>

Código Javascript:

Ver originallet inputBuscar = document.querySelector("[name=buscar]"),
    inputNombre = document.querySelector("[name=nombre]"), //El <input> del nombre
    inputApellido = document.querySelector("[name=apellido]"), //El <input> del apellido
    auto = new autocomplete();
 
auto.load({
    words: "buscar.php",
    target: inputBuscar,
    value: "nombre", //Esto solo se utiliza para indicar qué dato se va a mostrar en la lista desplegable
    async: true,
    select: function(data){
        inputNombre.value = data.nombre; //Aquí establezco el nombre
        inputApellido.value = data.apellido; //Y aquí el apellido
    }
});

Código PHP:

Ver original<?php
$mysqli = new mysqli('localhost', 'root', '', 'testing');
 
if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
 
$dato = $mysqli->real_escape_string($_GET['term']);
$query = "SELECT * FROM buscar WHERE nombre LIKE '%$dato%'";
$results = $mysqli->query($query) or exit($mysqli->errno . ': ' . $mysqli->error);
$respuesta = [];
 
if ($results->num_rows){
    while ($rows = $results->fetch_assoc()){
        $respuesta[] = [
            'nombre' => $rows['nombre'], //El nombre
            'apellido' => $rows['apellido'] //El apellido
        ];
    }
}
 
echo json_encode($respuesta);
?>

Fíjate que ya no empleo la variable inputFinal, la cual estabas repitiendo, sino que uso inputNombre para establecer el nombre, e inputApellido para el apellido.

IMPORTANTE: Debido a que se está realizando un cambio a nivel de la capa de presentación (JavaScript y HTML), necesitas actualizar la ventana con la combinación de teclas CTRL + F5 para que se ejecute el código actualizado. No olvides colocar aquí el mensaje de error que se muestra en la consola del navegador en caso de que no funcione.

pilucho · #33 (**permalink**) 02/04/2021, 17:48

vaya! si se podía entonces con varios campos. aun que no se muestra aun el apellido aqui la imagen

h t t p s : / / prnt .sc/112p5ww

PD: en algunos navegadores no funciona como en OPERA por eso era que no podía ver el resultado.
pero solo para prueba estoy usando el microsoft edge para poder ver en funcionamiendo se podra arreglar eso que se vea en Opera?

Alexis88 · #34 (**permalink**) 02/04/2021, 17:55

No tendría que haber incompatibilidad con otros navegadores. Quizá no actualizaste con CTRL + F5. Como se hizo un cambio en el código JavaScript y HTML, la copia de la carga previa quedó en la memoria caché del navegador y es esa copia la que se ejecuta. Actualizando con CTRL + F5 se limpia la caché y se ejecuta el código actualizado.

pilucho · #35 (**permalink**) 02/04/2021, 18:06

Cita:

Iniciado por Alexis88

No tendría que haber incompatibilidad con otros navegadores. Quizá no actualizaste con CTRL + F5. Como se hizo un cambio en el código JavaScript y HTML, la copia de la carga previa quedó en la memoria caché del navegador y es esa copia la que se ejecuta. Actualizando con CTRL + F5 se limpia la caché y se ejecuta el código actualizado.

Disculpa Alexis88 tienes toda la razón si se ve en todo los navegadores lo acabo de probar borrando todo lo indicado.

Aun se muestra solo el nombre mas no el apellido es decir el segundo campo., que podría ser?

pilucho · #36 (**permalink**) 02/04/2021, 19:38

Muchas Gracias Alexis88 ya funciona todo esta OK. te agregue puntos por la ayuda.

tengo una consulta, si quiero buscar en dos campos distintos usando uno para el nombre y otro para el email se tiene que modificar el PHP ? o hacer dos JS y PHP distintos?

Código HTML:

Ver original<form>
        <section>
            <label>Buscar por nombre:</label>
            <input type="search" name="buscar" autofocus />
        </section>
 
        <section>
            <label>buscar por email:</label>
            <input type="search" name="buscar" autofocus />
        </section>
     
        <section>
            <label>Resultados seleccionados:</label>
            <input type="text" name="nombre" readOnly />
            <input type="text" name="apellido" readOnly />
        </section>
    </form>

Alexis88 · #37 (**permalink**) 02/04/2021, 20:53

Cita:

Iniciado por pilucho

Muchas Gracias Alexis88 ya funciona todo esta OK. te agregue puntos por la ayuda.

tengo una consulta, si quiero buscar en dos campos distintos usando uno para el nombre y otro para el email se tiene que modificar el PHP ? o hacer dos JS y PHP distintos?

Código HTML:

Ver original<form>
        <section>
            <label>Buscar por nombre:</label>
            <input type="search" name="buscar" autofocus />
        </section>
 
        <section>
            <label>buscar por email:</label>
            <input type="search" name="buscar" autofocus />
        </section>
     
        <section>
            <label>Resultados seleccionados:</label>
            <input type="text" name="nombre" readOnly />
            <input type="text" name="apellido" readOnly />
        </section>
    </form>

Tendrías que añadir otra instancia del objeto de autocompletado y asociarlo a la caja de búsqueda por correo. En cuanto al archivo PHP, puedes hacer la búsqueda por nombre o correo en la misma consulta SQL. Y como supongo que buscas obtener los mismos resultados ya sea buscando por nombre o por correo, puedes emplear una sola función que recoja los datos de la opción seleccionada en la lista de autocompletado y los establezca en las cajas respectivas.

Por ejemplo:

Código HTML:

Ver original<form>
    <section>
        <label>Buscar por nombre:</label>
        <input type="search" name="byName" autofocus />
    </section>
 
    <section>
        <label>Buscar por correo:</label>
        <input type="search" name="byEmail" autofocus />
    </section>
 
    <hr />
 
    <section>
        <label>Resultados seleccionados:</label>
        <p>
            <input type="text" name="nombre" readOnly />                
        </p>
        <p>
            <input type="text" name="correo" readOnly />                
        </p>
    </section>
</form>

Código Javascript:

Ver originallet buscarNom = document.querySelector("[name=byName]"), //<input> de búsqueda por nombre
    buscarCor = document.querySelector("[name=byEmail]"), //<input> de búsqueda por correo
    inputNombre = document.querySelector("[name=nombre]"), //<input> en donde se mostrará el nombre
    inputCorreo = document.querySelector("[name=correo]"), //<input> en donde se mostrará el correo
    autoNombre = new autocomplete(), autoCorreo = new autocomplete(), //Instancias del objeto de autocompletado
    rellenar = function(data){ //Función que recoge los datos seleccionados y los establece en las cajas
        inputNombre.value = data.nombre;
        inputCorreo.value = data.correo;
    };
 
//Instancia del objeto para buscar por nombre
autoNombre.load({
    words: "buscar.php",
    target: buscarNom,
    value: "nombre",
    async: true,
    select: rellenar
});
 
//Instancia del objeto para buscar por correo
autoCorreo.load({
    words: "buscar.php",
    target: buscarCor,
    value: "correo",
    async: true,
    select: rellenar
});

Código PHP:

Ver original<?php
$mysqli = new mysqli('server', 'user', 'password', 'database');
 
if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
 
//Se emplea la misma variable pues es la que utiliza el objeto de autocompletado 
$dato = $mysqli->real_escape_string($_GET['term']);
 
//Se realiza la búsqueda ya sea por nombre o correo
$query = "SELECT nombre, correo FROM personas WHERE nombre LIKE '%$dato%' OR correo LIKE '%$dato%'";
$results = $mysqli->query($query) or exit($mysqli->errno . ': ' . $mysqli->error);
$respuesta = [];
 
if ($results->num_rows){
    while ($rows = $results->fetch_assoc()){
        $respuesta[] = [
            'nombre' => $rows['nombre'], //Se devuelve el nombre
            'correo' => $rows['correo'] //Y el correo
        ];
    }
}
 
echo json_encode($respuesta);
?>

Aquí puedes probarlo en línea. No olvides adaptarlo a lo que tienes, borrar la caché del navegador, y mostrar aquí cualquier mensaje de error en la consola del navegador que te surja en caso de que no funcione.

pilucho · #38 (**permalink**) 02/04/2021, 21:30

Cita:

Iniciado por Alexis88

Tendrías que añadir otra instancia del objeto de autocompletado y asociarlo a la caja de búsqueda por correo. En cuanto al archivo PHP, puedes hacer la búsqueda por nombre o correo en la misma consulta SQL. Y como supongo que buscas obtener los mismos resultados ya sea buscando por nombre o por correo, puedes emplear una sola función que recoja los datos de la opción seleccionada en la lista de autocompletado y los establezca en las cajas respectivas.

Por ejemplo:

Código HTML:

Ver original<form>
    <section>
        <label>Buscar por nombre:</label>
        <input type="search" name="byName" autofocus />
    </section>
 
    <section>
        <label>Buscar por correo:</label>
        <input type="search" name="byEmail" autofocus />
    </section>
 
    <hr />
 
    <section>
        <label>Resultados seleccionados:</label>
        <p>
            <input type="text" name="nombre" readOnly />                
        </p>
        <p>
            <input type="text" name="correo" readOnly />                
        </p>
    </section>
</form>

Código Javascript:

Ver originallet buscarNom = document.querySelector("[name=byName]"), //<input> de búsqueda por nombre
    buscarCor = document.querySelector("[name=byEmail]"), //<input> de búsqueda por correo
    inputNombre = document.querySelector("[name=nombre]"), //<input> en donde se mostrará el nombre
    inputCorreo = document.querySelector("[name=correo]"), //<input> en donde se mostrará el correo
    autoNombre = new autocomplete(), autoCorreo = new autocomplete(), //Instancias del objeto de autocompletado
    rellenar = function(data){ //Función que recoge los datos seleccionados y los establece en las cajas
        inputNombre.value = data.nombre;
        inputCorreo.value = data.correo;
    };
 
//Instancia del objeto para buscar por nombre
autoNombre.load({
    words: "buscar.php",
    target: buscarNom,
    value: "nombre",
    async: true,
    select: rellenar
});
 
//Instancia del objeto para buscar por correo
autoCorreo.load({
    words: "buscar.php",
    target: buscarCor,
    value: "correo",
    async: true,
    select: rellenar
});

Código PHP:

Ver original<?php
$mysqli = new mysqli('server', 'user', 'password', 'database');
 
if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
 
//Se emplea la misma variable pues es la que utiliza el objeto de autocompletado 
$dato = $mysqli->real_escape_string($_GET['term']);
 
//Se realiza la búsqueda ya sea por nombre o correo
$query = "SELECT nombre, correo FROM personas WHERE nombre LIKE '%$dato%' OR correo LIKE '%$dato%'";
$results = $mysqli->query($query) or exit($mysqli->errno . ': ' . $mysqli->error);
$respuesta = [];
 
if ($results->num_rows){
    while ($rows = $results->fetch_assoc()){
        $respuesta[] = [
            'nombre' => $rows['nombre'], //Se devuelve el nombre
            'correo' => $rows['correo'] //Y el correo
        ];
    }
}
 
echo json_encode($respuesta);
?>

Aquí puedes probarlo en línea. No olvides adaptarlo a lo que tienes, borrar la caché del navegador, y mostrar aquí cualquier mensaje de error en la consola del navegador que te surja en caso de que no funcione.

Excelente ahora si quedo perfecto muchas gracias.
en esta imagen salen solo estos errores supongo que no es de importancia o si?
https:// prnt.sc/112t8f3

Alexis88 · #39 (**permalink**) 02/04/2021, 21:47

Cita:

Iniciado por pilucho

[...] en esta imagen salen solo estos errores supongo que no es de importancia o si?

No son errores, como tal, sino meras advertencias sobre semántica web. Nada que interfiera con el funcionamiento del script.

pilucho · #40 (**permalink**) 02/04/2021, 21:54

Cita:

Iniciado por Alexis88

No son errores, como tal, sino meras advertencias sobre semántica web. Nada que interfiera con el funcionamiento del script.

Gracias. para cambiar los colores del hover anarillos son todo en el autocomplete-5.0.js cierto?

Alexis88 · #41 (**permalink**) 02/04/2021, 22:13

Cita:

Iniciado por pilucho

Gracias. para cambiar los colores del hover anarillos son todo en el autocomplete-5.0.js cierto?

No es necesario tocar ese archivo. Basta con que añadas dos valores extra en la instancia del objeto:

Código Javascript:

Ver originalautoNombre.load({
    words: "buscar.php",
    target: buscarNom,
    value: "nombre",
    async: true,
    select: rellenar,
    backList: "#3CB371", //Para el color de fondo
    hover: "#F5FFFA" //Para el color cuando el cursor esté encima
});

Con backList estableces el color de fondo de las opciones, y con hover el color que se mostrará cuando se coloque el cursor del ratón sobre cada opción. Esos códigos hexadecimales que puse los puedes reemplazar por los que veas conveniente. Aquí puedes encontrar varios más.

pilucho · #42 (**permalink**) 02/04/2021, 22:23

Cita:

Iniciado por Alexis88

No es necesario tocar ese archivo. Basta con que añadas dos valores extra en la instancia del objeto:

Código Javascript:

Ver originalautoNombre.load({
    words: "buscar.php",
    target: buscarNom,
    value: "nombre",
    async: true,
    select: rellenar,
    backList: "#3CB371", //Para el color de fondo
    hover: "#F5FFFA" //Para el color cuando el cursor esté encima
});

Con backList estableces el color de fondo de las opciones, y con hover el color que se mostrará cuando se coloque el cursor del ratón sobre cada opción. Esos códigos hexadecimales que puse los puedes reemplazar por los que veas conveniente. Aquí puedes encontrar varios más.

Gracias.

por la ayuda con el "autocomplete" se que a muchos les servirá este código para sus proyectos. busque similar y no hay mucho el parecido, seria bueno se este actualizando en el Repo de Github, 6 meses o anual, para cuando deje de funcionar haya una solución.

pilucho · #43 (**permalink**) 02/04/2021, 23:32

amigo Alexis88 sabes como puedo solucionar la posición '?? me sale como la imagen

https:// prnt.sc/112vgu5

https://prnt.sc/112vgu5

Alexis88 · #44 (**permalink**) 03/04/2021, 12:42

Cita:

Iniciado por pilucho

amigo Alexis88 sabes como puedo solucionar la posición '?? me sale como la imagen

https:// prnt.sc/112vgu5

https://prnt.sc/112vgu5

No sé por qué pueda estar pasándote eso. Quizá si haces la prueba borrando la caché o en otros navegadores se pueda hacer algún descarte.

pilucho · #45 (**permalink**) 03/04/2021, 13:39

Cita:

Iniciado por Alexis88

No sé por qué pueda estar pasándote eso. Quizá si haces la prueba borrando la caché o en otros navegadores se pueda hacer algún descarte.

ya probé todo amigo y nada, ya decía yo que tanta maravilla algo debe pasar

probé toda las ubicaciones y nada:

Código Javascript:

Ver originalthis.container.style.float  || "right";  // add right, left
        this.container.style.position = "absolute"; // absolute, initial, static, fixed, relative, sticky, inherit
        this.container.style.zIndex = 9999;

Alexis88 · #46 (**permalink**) 03/04/2021, 15:57

Cita:

Iniciado por pilucho

ya probé todo amigo y nada, ya decía yo que tanta maravilla algo debe pasar

probé toda las ubicaciones y nada:

Código Javascript:

Ver originalthis.container.style.float  || "right";  // add right, left
        this.container.style.position = "absolute"; // absolute, initial, static, fixed, relative, sticky, inherit
        this.container.style.zIndex = 9999;

¿Podrías subir el proyecto a la web para poder probarlo? O quizá podrías subir los archivos comprimidos y generar un enlace de descarga para verlos y analizarlos. Se me ocurre que puedas estar teniendo un problema de conflicto con otros estilos. He utilizado ese autocompletador desde hace siete años y no he tenido ese problema.

Consejo: No toques el archivo generador del autocompletado.

pilucho · #47 (**permalink**) 03/04/2021, 16:03

Cita:

Iniciado por Alexis88

¿Podrías subir el proyecto a la web para poder probarlo? O quizá podrías subir los archivos comprimidos y generar un enlace de descarga para verlos y analizarlos. Se me ocurre que puedas estar teniendo un problema de conflicto con otros estilos. He utilizado ese autocompletador desde hace siete años y no he tenido ese problema.

Consejo: No toques el archivo generador del autocompletado.

tratare de subirlo pero le puse cero a esta parte del script y se movio

original

Código Javascript:

Ver originalposition: function(self){
        /**
          * Sets the width for the options list and positions it
          */
            
        if (self.elem){
            self.container.style.width = self.elem.offsetWidth + "px";
            self.container.style.left = self.elem.offsetLeft + "px";
            self.container.style.top = self.elem.offsetTop + self.elem.offsetHeight + "px";
        }
    },

agrege cero

Código Javascript:

Ver originalposition: function(self){
        /**
          * Sets the width for the options list and positions it
          */
            
        if (self.elem){
            self.container.style.width = self.elem.offsetWidth + "0px";
            self.container.style.left = self.elem.offsetLeft + "0px";
            self.container.style.top = self.elem.offsetTop + self.elem.offsetHeight + "0px";
        }
    },

Alexis88 · #48 (**permalink**) 03/04/2021, 16:11

No es conveniente que toques ese código porque ya está configurado para que la lista ocupe el ancho de la caja y se ubique debajo de ella.

pilucho · #49 (**permalink**) 03/04/2021, 17:42

Hola Alexis88 al parecer no tiene compatibilidad con /bootstrap/ hice las pruebas sin usar style, y hasta cierta clase funciona
pero si empiezo a utilizar col-, form-group, card, etc.. se alinea el texto en otra ubicación en este caso en el "top left"
ya que es tu código seria bueno que haya compatibilidad con bootstrap para que la apariencia quede mas agradable

en resumen sin estilos de bootstrap funciona todo OK
pero con estilo bootstrap no funciona se desalinea .

Código HTML:

Ver original<section class="content">
      <div class="container-fluid">
        <!-- row (main row) -->
        <div class="row">
         <!--  SI COLOCO AQUI EL <form>...  ME FUNCIONA, TODO BIEN --> 
          <div class="col-12">
            <div class="form-group card col-md-8 py-2">
 
 
 
<!-- 
SI COLOCO EL CODIGO <form> DENTRO DEL "form-group card col-md-auto py-2"   
me aparece el cuadro de input al lado izquierdo de arriba, 
 -->
 
<form>
    <section>
        <label>Buscar por nombre:</label>
        <input type="search" name="byName" autofocus />
    </section>
 
    <section>
        <label>Buscar por correo:</label>
        <input type="search" name="byEmail" autofocus />
    </section>
 
    <hr />
 
    <section>
        <label>Resultados seleccionados:</label>
        <p>
            <input type="text" name="nombre" readOnly />                
        </p>
        <p>
            <input type="text" name="correo" readOnly />                
        </p>
    </section>
</form>
 
 
 
 
            </div><!-- form-group card col-md-auto py-2 -->
          </div><!-- col -->
        </div><!-- row (main row) -->
      </div><!-- container-fluid -->
    </section><!-- content -->

Alexis88 · #50 (**permalink**) 03/04/2021, 20:06

Si estás usando Boostrap, te conviene echar mano de su widget para autocompletado.

pilucho · #51 (**permalink**) 03/04/2021, 21:23

Cita:

Iniciado por Alexis88

Si estás usando Boostrap, te conviene echar mano de su widget para autocompletado.

ah ok, ahi si me quedo en chino

pilucho · #52 (**permalink**) 03/04/2021, 22:33

gracias Alexis88 ya encontré otro script que se adapta a lo que necesito, usando tu recomendación de Boostrap Autocomplete

tuadmin · #53 (**permalink**) 05/04/2021, 19:47

En caso de necesitar algo moderno con HTML5 podrias optar por lo nativo
words.php

Código PHP:

Ver original<?php
/**
 * @autor tuadmin
 */
$words=array(
    "alberto",
    "ana",
    "bart",
    "barkley",
    "canasta",
    "canguro",
    "candidato",
    "canastasio",
    "cancerbero",
    "cantinero",
    "canaston",
    "canguron",
    "cantinflas",
    "cantinflon",
    "pedro",
    "pepe",
);
$palabra = @$_GET["buscar"] ?$_GET["buscar"]:'';
 
$lista_filtrada = array_filter($words,function($nombre) use( & $palabra){
    return stripos($nombre,$palabra)===0;
},);
echo json_encode(array_slice($lista_filtrada,0,2,false));
//var_dump($lista_filtrada);

index.html

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>autocompletado</title>
</head>
<body>
    <input type="text" list="autocompletado_ctm" placeholder="letras con a,b o c" id="campo_texto">
    <datalist  id="autocompletado_ctm">    
    </datalist>
    <script>
        var DataList= document.getElementById("autocompletado_ctm");
        var Entrada = document.getElementById("campo_texto");
        function total_palabras_visibles(palabra){
            var contar = 0;
            for(var i = 0;i<DataList.options.length;i++){
                if(DataList.options[i].value.startsWith(palabra)){
                    contar++;
                }
                
            }
            return contar;
        }
        Entrada.addEventListener("keyup",function(e){
            //console.log(e);
            
            var buscar = Entrada.value.trim();
            //si es mayor a 1 no ejecutamos el query 
            if(total_palabras_visibles(buscar)>1){
                //Seria util, en caso de tener mILES y MILES de nombres
                //console.log("no ejecutamos");
                return false;
            }
            
            fetch("./words.php?buscar="+ encodeURIComponent(buscar)  ).then(function(stream){
                return stream.json();
            }).then(function(array_php){
                //vaciamos la lista actual
                DataList.innerHTML='';
                for(var i = 0;i<array_php.length;i++){
                    var opt = document.createElement('option');
                    opt.innerText = array_php[i];
                    DataList.append(opt);
                }
            });
        })
        
    </script>
</body>
</html>