Foros del Web » Programando para Internet » PHP »

[SOLUCIONADO] live search php

Estas en el tema de live search php en el foro de PHP en Foros del Web. 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 ...

  #31 (permalink)  
Antiguo 02/04/2021, 16:45
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

Cita:
Iniciado por Alexis88 Ver Mensaje
¿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
  1. <?php
  2. $mysqli = new mysqli('localhost', 'root', '', 'testing');
  3.  
  4. if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
  5.  
  6. $dato = $mysqli->real_escape_string($_GET['term']);
  7. $query = "SELECT nombre FROM buscar WHERE nombre LIKE '%$dato%'";
  8. $results = $mysqli->query($query) or exit($mysqli->errno . ': ' . $mysqli->error);
  9. $respuesta = [];
  10.  
  11. if ($results->num_rows){
  12.     while ($rows = $results->fetch_assoc()){
  13.         $respuesta[] = ['nombre' => $rows['nombre']];
  14.     }
  15. }
  16.  
  17. echo json_encode($respuesta);
  18. ?>

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
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.     <meta charset="utf-8" />
  4.     <title>Buscador</title>
  5. </head>
  6.     <form>
  7.         <section>
  8.             <label>Buscar por nombre:</label>
  9.             <input type="search" name="buscar" autofocus />
  10.         </section>
  11.  
  12.         <section>
  13.             <label>Resultado seleccionado:</label>
  14.             <input type="text" name="nombre" readOnly />
  15.             <input type="text" name="apellido" readOnly />
  16.         </section>
  17.     </form>
  18.  
  19.     <script type="text/javascript" src="autocomplete-5.0.js"></script>
  20.     <script type="text/javascript" src="codescript.js"></script>
  21. </body>
  22. </html>

Código Javascript:
Ver original
  1. let inputBuscar = document.querySelector("[name=buscar]"),
  2.     inputFinal = document.querySelector("[name=nombre]"),
  3.     inputFinal = document.querySelector("[name=apellido]"),
  4.     auto = new autocomplete();
  5.  
  6. auto.load({
  7.     words: "buscar.php",
  8.     target: inputBuscar,
  9.     value: "nombre",
  10.     value: "apellido",
  11.     async: true,
  12.     select: function(data){
  13.         inputFinal.value = data.nombre;
  14.     }
  15. });


























Código PHP:
Ver original
  1. <?php
  2.  
  3. $mysqli = new mysqli('localhost', 'root', '', 'testing');
  4.  
  5. if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
  6.  
  7. $dato = $mysqli->real_escape_string($_GET['term']);
  8. $query = "SELECT * FROM buscar WHERE nombre LIKE '%$dato%'";
  9. $results = $mysqli->query($query) or exit($mysqli->errno . ': ' . $mysqli->error);
  10. $respuesta = [];
  11.  
  12. if ($results->num_rows){
  13.     while ($rows = $results->fetch_assoc()){
  14.         $respuesta[] = ['nombre' => $rows['nombre']];
  15.         $respuesta[] = ['apellido' => $rows['apellido']];
  16.     }
  17. }
  18.  
  19. echo json_encode($respuesta);
  20. ?>
  #32 (permalink)  
Antiguo 02/04/2021, 17:25
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.519
Antigüedad: 9 años, 8 meses
Puntos: 962
Respuesta: live search php

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
  1.     <section>
  2.         <label>Buscar por nombre:</label>
  3.         <input type="search" name="buscar" autofocus />
  4.     </section>
  5.  
  6.     <section>
  7.         <label>Resultados seleccionados:</label>
  8.         <input type="text" name="nombre" readOnly />
  9.         <input type="text" name="apellido" readOnly />
  10.     </section>
  11. </form>

Código Javascript:
Ver original
  1. let inputBuscar = document.querySelector("[name=buscar]"),
  2.     inputNombre = document.querySelector("[name=nombre]"), //El <input> del nombre
  3.     inputApellido = document.querySelector("[name=apellido]"), //El <input> del apellido
  4.     auto = new autocomplete();
  5.  
  6. auto.load({
  7.     words: "buscar.php",
  8.     target: inputBuscar,
  9.     value: "nombre", //Esto solo se utiliza para indicar qué dato se va a mostrar en la lista desplegable
  10.     async: true,
  11.     select: function(data){
  12.         inputNombre.value = data.nombre; //Aquí establezco el nombre
  13.         inputApellido.value = data.apellido; //Y aquí el apellido
  14.     }
  15. });

Código PHP:
Ver original
  1. <?php
  2. $mysqli = new mysqli('localhost', 'root', '', 'testing');
  3.  
  4. if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
  5.  
  6. $dato = $mysqli->real_escape_string($_GET['term']);
  7. $query = "SELECT * FROM buscar WHERE nombre LIKE '%$dato%'";
  8. $results = $mysqli->query($query) or exit($mysqli->errno . ': ' . $mysqli->error);
  9. $respuesta = [];
  10.  
  11. if ($results->num_rows){
  12.     while ($rows = $results->fetch_assoc()){
  13.         $respuesta[] = [
  14.             'nombre' => $rows['nombre'], //El nombre
  15.             'apellido' => $rows['apellido'] //El apellido
  16.         ];
  17.     }
  18. }
  19.  
  20. echo json_encode($respuesta);
  21. ?>

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.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #33 (permalink)  
Antiguo 02/04/2021, 17:48
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

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?
  #34 (permalink)  
Antiguo 02/04/2021, 17:55
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.519
Antigüedad: 9 años, 8 meses
Puntos: 962
Respuesta: live search php

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.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #35 (permalink)  
Antiguo 02/04/2021, 18:06
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

Cita:
Iniciado por Alexis88 Ver Mensaje
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?
  #36 (permalink)  
Antiguo 02/04/2021, 19:38
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

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
  1.         <section>
  2.             <label>Buscar por nombre:</label>
  3.             <input type="search" name="buscar" autofocus />
  4.         </section>
  5.  
  6.         <section>
  7.             <label>buscar por email:</label>
  8.             <input type="search" name="buscar" autofocus />
  9.         </section>
  10.      
  11.         <section>
  12.             <label>Resultados seleccionados:</label>
  13.             <input type="text" name="nombre" readOnly />
  14.             <input type="text" name="apellido" readOnly />
  15.         </section>
  16.     </form>
  #37 (permalink)  
Antiguo 02/04/2021, 20:53
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.519
Antigüedad: 9 años, 8 meses
Puntos: 962
Respuesta: live search php

Cita:
Iniciado por pilucho Ver Mensaje
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
  1.         <section>
  2.             <label>Buscar por nombre:</label>
  3.             <input type="search" name="buscar" autofocus />
  4.         </section>
  5.  
  6.         <section>
  7.             <label>buscar por email:</label>
  8.             <input type="search" name="buscar" autofocus />
  9.         </section>
  10.      
  11.         <section>
  12.             <label>Resultados seleccionados:</label>
  13.             <input type="text" name="nombre" readOnly />
  14.             <input type="text" name="apellido" readOnly />
  15.         </section>
  16.     </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
  1.     <section>
  2.         <label>Buscar por nombre:</label>
  3.         <input type="search" name="byName" autofocus />
  4.     </section>
  5.  
  6.     <section>
  7.         <label>Buscar por correo:</label>
  8.         <input type="search" name="byEmail" autofocus />
  9.     </section>
  10.  
  11.     <hr />
  12.  
  13.     <section>
  14.         <label>Resultados seleccionados:</label>
  15.         <p>
  16.             <input type="text" name="nombre" readOnly />                
  17.         </p>
  18.         <p>
  19.             <input type="text" name="correo" readOnly />                
  20.         </p>
  21.     </section>
  22. </form>


Código Javascript:
Ver original
  1. let buscarNom = document.querySelector("[name=byName]"), //<input> de búsqueda por nombre
  2.     buscarCor = document.querySelector("[name=byEmail]"), //<input> de búsqueda por correo
  3.     inputNombre = document.querySelector("[name=nombre]"), //<input> en donde se mostrará el nombre
  4.     inputCorreo = document.querySelector("[name=correo]"), //<input> en donde se mostrará el correo
  5.     autoNombre = new autocomplete(), autoCorreo = new autocomplete(), //Instancias del objeto de autocompletado
  6.     rellenar = function(data){ //Función que recoge los datos seleccionados y los establece en las cajas
  7.         inputNombre.value = data.nombre;
  8.         inputCorreo.value = data.correo;
  9.     };
  10.  
  11. //Instancia del objeto para buscar por nombre
  12. autoNombre.load({
  13.     words: "buscar.php",
  14.     target: buscarNom,
  15.     value: "nombre",
  16.     async: true,
  17.     select: rellenar
  18. });
  19.  
  20. //Instancia del objeto para buscar por correo
  21. autoCorreo.load({
  22.     words: "buscar.php",
  23.     target: buscarCor,
  24.     value: "correo",
  25.     async: true,
  26.     select: rellenar
  27. });

Código PHP:
Ver original
  1. <?php
  2. $mysqli = new mysqli('server', 'user', 'password', 'database');
  3.  
  4. if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
  5.  
  6. //Se emplea la misma variable pues es la que utiliza el objeto de autocompletado
  7. $dato = $mysqli->real_escape_string($_GET['term']);
  8.  
  9. //Se realiza la búsqueda ya sea por nombre o correo
  10. $query = "SELECT nombre, correo FROM personas WHERE nombre LIKE '%$dato%' OR correo LIKE '%$dato%'";
  11. $results = $mysqli->query($query) or exit($mysqli->errno . ': ' . $mysqli->error);
  12. $respuesta = [];
  13.  
  14. if ($results->num_rows){
  15.     while ($rows = $results->fetch_assoc()){
  16.         $respuesta[] = [
  17.             'nombre' => $rows['nombre'], //Se devuelve el nombre
  18.             'correo' => $rows['correo'] //Y el correo
  19.         ];
  20.     }
  21. }
  22.  
  23. echo json_encode($respuesta);
  24. ?>

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.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #38 (permalink)  
Antiguo 02/04/2021, 21:30
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

Cita:
Iniciado por Alexis88 Ver Mensaje
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
  1.     <section>
  2.         <label>Buscar por nombre:</label>
  3.         <input type="search" name="byName" autofocus />
  4.     </section>
  5.  
  6.     <section>
  7.         <label>Buscar por correo:</label>
  8.         <input type="search" name="byEmail" autofocus />
  9.     </section>
  10.  
  11.     <hr />
  12.  
  13.     <section>
  14.         <label>Resultados seleccionados:</label>
  15.         <p>
  16.             <input type="text" name="nombre" readOnly />                
  17.         </p>
  18.         <p>
  19.             <input type="text" name="correo" readOnly />                
  20.         </p>
  21.     </section>
  22. </form>


Código Javascript:
Ver original
  1. let buscarNom = document.querySelector("[name=byName]"), //<input> de búsqueda por nombre
  2.     buscarCor = document.querySelector("[name=byEmail]"), //<input> de búsqueda por correo
  3.     inputNombre = document.querySelector("[name=nombre]"), //<input> en donde se mostrará el nombre
  4.     inputCorreo = document.querySelector("[name=correo]"), //<input> en donde se mostrará el correo
  5.     autoNombre = new autocomplete(), autoCorreo = new autocomplete(), //Instancias del objeto de autocompletado
  6.     rellenar = function(data){ //Función que recoge los datos seleccionados y los establece en las cajas
  7.         inputNombre.value = data.nombre;
  8.         inputCorreo.value = data.correo;
  9.     };
  10.  
  11. //Instancia del objeto para buscar por nombre
  12. autoNombre.load({
  13.     words: "buscar.php",
  14.     target: buscarNom,
  15.     value: "nombre",
  16.     async: true,
  17.     select: rellenar
  18. });
  19.  
  20. //Instancia del objeto para buscar por correo
  21. autoCorreo.load({
  22.     words: "buscar.php",
  23.     target: buscarCor,
  24.     value: "correo",
  25.     async: true,
  26.     select: rellenar
  27. });

Código PHP:
Ver original
  1. <?php
  2. $mysqli = new mysqli('server', 'user', 'password', 'database');
  3.  
  4. if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
  5.  
  6. //Se emplea la misma variable pues es la que utiliza el objeto de autocompletado
  7. $dato = $mysqli->real_escape_string($_GET['term']);
  8.  
  9. //Se realiza la búsqueda ya sea por nombre o correo
  10. $query = "SELECT nombre, correo FROM personas WHERE nombre LIKE '%$dato%' OR correo LIKE '%$dato%'";
  11. $results = $mysqli->query($query) or exit($mysqli->errno . ': ' . $mysqli->error);
  12. $respuesta = [];
  13.  
  14. if ($results->num_rows){
  15.     while ($rows = $results->fetch_assoc()){
  16.         $respuesta[] = [
  17.             'nombre' => $rows['nombre'], //Se devuelve el nombre
  18.             'correo' => $rows['correo'] //Y el correo
  19.         ];
  20.     }
  21. }
  22.  
  23. echo json_encode($respuesta);
  24. ?>

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
  #39 (permalink)  
Antiguo 02/04/2021, 21:47
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.519
Antigüedad: 9 años, 8 meses
Puntos: 962
Respuesta: live search php

Cita:
Iniciado por pilucho Ver Mensaje
[...] 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.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #40 (permalink)  
Antiguo 02/04/2021, 21:54
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

Cita:
Iniciado por Alexis88 Ver Mensaje
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?
  #41 (permalink)  
Antiguo 02/04/2021, 22:13
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.519
Antigüedad: 9 años, 8 meses
Puntos: 962
Respuesta: live search php

Cita:
Iniciado por pilucho Ver Mensaje
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 original
  1. autoNombre.load({
  2.     words: "buscar.php",
  3.     target: buscarNom,
  4.     value: "nombre",
  5.     async: true,
  6.     select: rellenar,
  7.     backList: "#3CB371", //Para el color de fondo
  8.     hover: "#F5FFFA" //Para el color cuando el cursor esté encima
  9. });

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.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #42 (permalink)  
Antiguo 02/04/2021, 22:23
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Mensaje Respuesta: live search php

Cita:
Iniciado por Alexis88 Ver Mensaje
No es necesario tocar ese archivo. Basta con que añadas dos valores extra en la instancia del objeto:

Código Javascript:
Ver original
  1. autoNombre.load({
  2.     words: "buscar.php",
  3.     target: buscarNom,
  4.     value: "nombre",
  5.     async: true,
  6.     select: rellenar,
  7.     backList: "#3CB371", //Para el color de fondo
  8.     hover: "#F5FFFA" //Para el color cuando el cursor esté encima
  9. });

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.

  #43 (permalink)  
Antiguo 02/04/2021, 23:32
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

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

https:// prnt.sc/112vgu5

https://prnt.sc/112vgu5
  #44 (permalink)  
Antiguo 03/04/2021, 12:42
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.519
Antigüedad: 9 años, 8 meses
Puntos: 962
Respuesta: live search php

Cita:
Iniciado por pilucho Ver Mensaje
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.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #45 (permalink)  
Antiguo 03/04/2021, 13:39
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

Cita:
Iniciado por Alexis88 Ver Mensaje
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 original
  1. this.container.style.float  || "right";  // add right, left
  2.         this.container.style.position = "absolute"; // absolute, initial, static, fixed, relative, sticky, inherit
  3.         this.container.style.zIndex = 9999;
  #46 (permalink)  
Antiguo 03/04/2021, 15:57
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.519
Antigüedad: 9 años, 8 meses
Puntos: 962
Respuesta: live search php

Cita:
Iniciado por pilucho Ver Mensaje
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 original
  1. this.container.style.float  || "right";  // add right, left
  2.         this.container.style.position = "absolute"; // absolute, initial, static, fixed, relative, sticky, inherit
  3.         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.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #47 (permalink)  
Antiguo 03/04/2021, 16:03
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

Cita:
Iniciado por Alexis88 Ver Mensaje
¿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 original
  1. position: function(self){
  2.         /**
  3.           * Sets the width for the options list and positions it
  4.           */
  5.            
  6.         if (self.elem){
  7.             self.container.style.width = self.elem.offsetWidth + "px";
  8.             self.container.style.left = self.elem.offsetLeft + "px";
  9.             self.container.style.top = self.elem.offsetTop + self.elem.offsetHeight + "px";
  10.         }
  11.     },

agrege cero
Código Javascript:
Ver original
  1. position: function(self){
  2.         /**
  3.           * Sets the width for the options list and positions it
  4.           */
  5.            
  6.         if (self.elem){
  7.             self.container.style.width = self.elem.offsetWidth + "0px";
  8.             self.container.style.left = self.elem.offsetLeft + "0px";
  9.             self.container.style.top = self.elem.offsetTop + self.elem.offsetHeight + "0px";
  10.         }
  11.     },
  #48 (permalink)  
Antiguo 03/04/2021, 16:11
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.519
Antigüedad: 9 años, 8 meses
Puntos: 962
Respuesta: live search php

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.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #49 (permalink)  
Antiguo 03/04/2021, 17:42
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

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
  1. <section class="content">
  2.       <div class="container-fluid">
  3.         <!-- row (main row) -->
  4.         <div class="row">
  5.          <!--  SI COLOCO AQUI EL <form>...  ME FUNCIONA, TODO BIEN -->
  6.           <div class="col-12">
  7.             <div class="form-group card col-md-8 py-2">
  8.  
  9.  
  10.  
  11. <!--
  12. SI COLOCO EL CODIGO <form> DENTRO DEL "form-group card col-md-auto py-2"  
  13. me aparece el cuadro de input al lado izquierdo de arriba,
  14. -->
  15.  
  16.     <section>
  17.         <label>Buscar por nombre:</label>
  18.         <input type="search" name="byName" autofocus />
  19.     </section>
  20.  
  21.     <section>
  22.         <label>Buscar por correo:</label>
  23.         <input type="search" name="byEmail" autofocus />
  24.     </section>
  25.  
  26.     <hr />
  27.  
  28.     <section>
  29.         <label>Resultados seleccionados:</label>
  30.         <p>
  31.             <input type="text" name="nombre" readOnly />                
  32.         </p>
  33.         <p>
  34.             <input type="text" name="correo" readOnly />                
  35.         </p>
  36.     </section>
  37. </form>
  38.  
  39.  
  40.  
  41.  
  42.             </div><!-- form-group card col-md-auto py-2 -->
  43.           </div><!-- col -->
  44.         </div><!-- row (main row) -->
  45.       </div><!-- container-fluid -->
  46.     </section><!-- content -->
  #50 (permalink)  
Antiguo 03/04/2021, 20:06
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.519
Antigüedad: 9 años, 8 meses
Puntos: 962
Respuesta: live search php

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

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #51 (permalink)  
Antiguo 03/04/2021, 21:23
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

Cita:
Iniciado por Alexis88 Ver Mensaje
Si estás usando Boostrap, te conviene echar mano de su widget para autocompletado.

ah ok, ahi si me quedo en chino
  #52 (permalink)  
Antiguo 03/04/2021, 22:33
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 637
Antigüedad: 16 años, 8 meses
Puntos: 6
Respuesta: live search php

gracias Alexis88 ya encontré otro script que se adapta a lo que necesito, usando tu recomendación de Boostrap Autocomplete
  #53 (permalink)  
Antiguo 05/04/2021, 19:47
 
Fecha de Ingreso: abril-2006
Mensajes: 583
Antigüedad: 15 años, 3 meses
Puntos: 120
Respuesta: live search php

En caso de necesitar algo moderno con HTML5 podrias optar por lo nativo
words.php
Código PHP:
Ver original
  1. <?php
  2. /**
  3.  * @autor tuadmin
  4.  */
  5. $words=array(
  6.     "alberto",
  7.     "ana",
  8.     "bart",
  9.     "barkley",
  10.     "canasta",
  11.     "canguro",
  12.     "candidato",
  13.     "canastasio",
  14.     "cancerbero",
  15.     "cantinero",
  16.     "canaston",
  17.     "canguron",
  18.     "cantinflas",
  19.     "cantinflon",
  20.     "pedro",
  21.     "pepe",
  22. );
  23. $palabra = @$_GET["buscar"] ?$_GET["buscar"]:'';
  24.  
  25. $lista_filtrada = array_filter($words,function($nombre) use( & $palabra){
  26.     return stripos($nombre,$palabra)===0;
  27. },);
  28. echo json_encode(array_slice($lista_filtrada,0,2,false));
  29. //var_dump($lista_filtrada);
index.html
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>autocompletado</title>
  7. </head>
  8.     <input type="text" list="autocompletado_ctm" placeholder="letras con a,b o c" id="campo_texto">
  9.     <datalist  id="autocompletado_ctm">    
  10.     </datalist>
  11.     <script>
  12.         var DataList= document.getElementById("autocompletado_ctm");
  13.         var Entrada = document.getElementById("campo_texto");
  14.         function total_palabras_visibles(palabra){
  15.             var contar = 0;
  16.             for(var i = 0;i<DataList.options.length;i++){
  17.                if(DataList.options[i].value.startsWith(palabra)){
  18.                    contar++;
  19.                }
  20.                
  21.            }
  22.            return contar;
  23.        }
  24.        Entrada.addEventListener("keyup",function(e){
  25.            //console.log(e);
  26.            
  27.            var buscar = Entrada.value.trim();
  28.            //si es mayor a 1 no ejecutamos el query
  29.            if(total_palabras_visibles(buscar)>1){
  30.                 //Seria util, en caso de tener mILES y MILES de nombres
  31.                 //console.log("no ejecutamos");
  32.                 return false;
  33.             }
  34.            
  35.             fetch("./words.php?buscar="+ encodeURIComponent(buscar)  ).then(function(stream){
  36.                 return stream.json();
  37.             }).then(function(array_php){
  38.                 //vaciamos la lista actual
  39.                 DataList.innerHTML='';
  40.                 for(var i = 0;i<array_php.length;i++){
  41.                    var opt = document.createElement('option');
  42.                    opt.innerText = array_php[i];
  43.                    DataList.append(opt);
  44.                }
  45.            });
  46.        })
  47.        
  48.    </script>
  49. </body>
  50. </html>
__________________
Mis aportes te ayudaron??, te hicieron ahorrar valiosos tiempo??, si quieres puedes agradecerme con un Gracias o con una donacion
https://paypal.com/pools/c/8lmNLmWnG9



La zona horaria es GMT -6. Ahora son las 05:25.