Leer cada caracter que introduce el usuario

[lcrecarey]

Hola forer@s:
Necesito hacer un "buscador" que (valga la redundancia) busque similitudes en un campo de la base de datos.
Me explico:
Si yo tengo en el Campo nombre de la Base de datos Clientes el nombre Lucía García Antelo, y el usuario teclea lu en el campo texto habilitado para esta búsqueda, que le salga un menú con todos los clientes cuyo nombre empiece por lu

Mi duda empieza en que no sé como implementar la lectura del valor del campo de texto en el que escribe el usuario para que se lea cada vez que se introduce un caracter.
Agradecería cualquier orientación.
Gracias.

[Cluster]

Mi duda empieza en que no sé como implementar la lectura del valor del campo de texto en el que escribe el usuario para que se lea cada vez que se introduce un caracter.

Eso lo haces con javascript ..

De hecho .. ante el evento "onKeypress()" (o similar no recuerdo ahora .. ) tendrás que mandar a llamar a tu script PHP que va hacer la consulta SQL a tu BD (un onSubmit() de un formulario .. o por otro médio pasar las variables que necesites) y la va a presentar .. Por cierto .. te hará falta usar frames o iframes .. por qué sino vas a perder eso "tecleado" ..

Lo ideal es que lo hagas en Javascript todo .. eso sí "generando" ese javascript desde PHP con los datos de tu tabla implicada de tu BD. Así evitas "recargar" la página .. usar iframes .. y demás historias.

Un saludo,

[Andrecito]

Sí, Cluster, ese es el evento. Ahora, si lo q se quiere hacer es una busqueda de nombres, no es mas facil cargar todos los nombres en un <select> de un formulario y en la medida q se vayan ingresando caracteres pues q vaya buscando los nombres q contienen esos caracteres? Algo asi, este script es de desarrolloweb:

var digitos=60 //cantidad de digitos buscados
var puntero=0
var buffer=new Array(digitos) //declaración del array Buffer
var cadena=""
var text2

function borrar_buffer()
{
//inicializa la cadena buscada
cadena='';
puntero=0;
}

function buscar_op(obj)
{
var letra = String.fromCharCode(event.keyCode)

if(puntero >= digitos)
{
cadena='';
puntero=0;
}

// alert(event.keyCode);
//si se presiona la tecla ENTER, borro el array de teclas presionadas y salto a otro objeto...
if (event.keyCode == 13)
{
borrar_buffer();
}
//sino busco la cadena tipeada dentro del combo...
else
{
buffer[puntero]=letra;
//guardo en la posicion puntero la letra tipeada
cadena = cadena + buffer[puntero]; //armo una cadena con los datos que van ingresando al array
puntero++;

//barro todas las opciones que contiene el combo y las comparo la cadena...
for (var opcombo=0 ; opcombo < obj.length ; opcombo++)
{
if(obj[opcombo].text.substr(0, puntero).toLowerCase() == cadena.toLowerCase())
{
obj.selectedIndex=opcombo;
}
}
}

event.returnValue = false; //invalida la acción de pulsado de tecla para evitar busqueda del primer caracter
}

[Cluster]

Si, Andrecito .. esa es la idea .. que genere su <selec> de la forma habitual con PHP dinámicamente (con sus datos) y use esa método javascript para el efecto "visual" de lo que pretende hacer.

Faltaría sólo que dejes el link de donde obtuvistes el ejemplo para que vea más documentación y/o ejemplo completo de uso.


Un saludo,

[lcrecarey]

Gracias a los 2 por la ayuda.
Voy a intentarlo y cuando tenga algún resultado, os lo hago saber.
Gracias.

[lcrecarey]

Hola Andrecito, Cluster y demás forer@s !!
Agradecería me siguieran ayudando con el problema del buscador, pues el código posteado por Andrecito no me funciona.
Lo único que consigo es que me vaya mostrando un alert cada vez que escribo un carácter.
Pero si le meto el select para buscar en la base de datos, me pone "error en la página" en la barra de estado y no hace nada.
¿Que puedo hacer para solucionarlo?

[jam1138]

Un alert??? de qué tipo??... tiene un alert el código pero esta comentado.. por lo que ni siquiera deberia de mostrartelo.. a menos que dicho alert no pertenesca a el código.

Pués... aparentemente hay algo en las FAQ del foro de JavaScript que hace exactamente lo que buscas.. ¿lo haz probado?

Suerte!

[lcrecarey]

Hola jam1138!
Me imagino que la FAQ a la que te refieres es la 60: Filtro sobre un select.
Gracias por la referencia. Ahora consigo que me lea el campo texto, pero tengo que modificar el script para que me busque el paciente en la base de datos. Y no tengo muy claro como hacerlo.
¿Sería mucho pedir una referencia o algo que me ayude a sustituir la funcion addOpt por el select?
Pido disculpas por anticipado si estoy haciendo preguntas tontas o muy básicas. Pero es que toy empezando y ... a veces no veo las cosas hasta que me rompo la cabeza contra ellas.
Gracias por vuestra paciencia.

[Cluster]

El caso es que no vas a buscar directamente en tu "Base de datos" .. sino que de todoooooos los resultados de tu Base de datos (clientes) vas a generar ese enorme "<select>" .. la parte javacript hará que según escribas irás a cierta parte de esa lista de opciones. Eso es por lo menos lo que hemos conversado en este tema .. si no es eso .. aclaremos para ver otras soluciones.

Un saludo,

[jam1138]

... Espero no tengas en mente que conforme se vaya escribiendo te realise una nueva consulta por cada carácter nuvo... puf!.

Lo mejor es eso.. desplegar todos los pacientes de la BD en tu select y que el textbox te ayude solo a encontrar dicho paciente de forma rápida... luego lo seleccionas y consultas .

Se más clara si no buscas esto. Saludos!

[lcrecarey]

Si, nos estamos entendiendo bien.
Pero mi problema es que en algún lado tendré que generar el select para que el script pueda buscar, o no?
y el otro problema es que no sé como modificar el script para que me busque el nombre del paciente, en vez de añadir entradas a la base de datos, como entiendo que hace este:

Código HTML:

<script language="JavaScript"> 

  var i; 

  function addOpt(oCntrl, sTxt, sVal, sCnd)
   { 
     if (sTxt.substr(0, sCnd.length).toUpperCase() == sCnd.toUpperCase())
	  { 
        var selOpcion=new Option(sTxt, sVal); 
        eval(oCntrl.options[i++]=selOpcion); 
      } 
   } 

  function cambia(oCntrl)
   { 
     var txtVal = document.form_nueva_cita.paciente.value; 
     while(oCntrl.length > 0) 
	   oCntrl.options[0]=null; 
     i = 0; 
     oCntrl.clear;  
     addOpt(oCntrl,  "Ciudad de México", "0", txtVal); 
     addOpt(oCntrl,  "Ciudad de Panamá", "0", txtVal); 
     addOpt(oCntrl,  "Ciudad de Guatemala", "0", txtVal); 
     addOpt(oCntrl,  "Caracas", "0", txtVal); 
     addOpt(oCntrl,  "Cancún", "0", txtVal); 
     addOpt(oCntrl,  "Maracay", "0", txtVal); 
     addOpt(oCntrl,  "Maracaibo", "0", txtVal); 
     addOpt(oCntrl,  "Zaragoza", "0", txtVal); 
   } 
</script> 

El código desde el que llamo a este script es:

Código HTML:

<form name="form_nueva_cita" method="get" action="validar.php">
<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif"> 
<strong>Paciente:</strong>
<input type="text" name="paciente" size="50" onkeyup="cambia(document.form_nueva_cita.select_paciente)">
<select name="select_paciente" >
</select> 

Pero en vez de poner los nombres de las ciudades, tendré que buscar los nombres de los pacientes. Pero no sé cómo. Ni siquiera sé si es eso lo que debo hacer.

Gracias por ayudarme,de verdad. Os lo agradezco en el alma.

[jam1138]

El select se va construyendo conforme vayas tecleando... y la primera ves se construye al cargar la página (ve la fincon "onLoad" dentro de la etiqueta BODY.

Tu lo que debes de hacer es imprimir los resultados de tu consulta en la función de JavaScript; algo como esto:

Código:

  function cambia(oCntrl)
   { 
     var txtVal = document.form_nueva_cita.paciente.value; 
     while(oCntrl.length > 0) 
	   oCntrl.options[0]=null; 
     i = 0; 
     oCntrl.clear;
<?php
// acá puedes conectarte, realizar tu consulta.. etc.
// Posteriormente:
while($celda=mysql_fetch_assoc($resultado)) {
     echo "addOpt(oCntrl,  \"".$celda['paciente']."\", \"0\", txtVal); 
}
?>
   } 
</script>

y con algo así debe de quedar... Solo consulta el campo a ocupar para no gastar recursos ("SELECT campo_pacientes FROM tabla").

Estamos para ayudarnos...

Solo... una observación:... Este script de JS .. "quiebra" al no hayar coincidencia... supongamos, el select tiene a "Alberto, Arturo, Apolinar" ... y si tu buscas "Apolonio" se vacia cuando escribes la segunda o ... me pareció ver otro script que no te borraba tus opciones... sino que se movia através de ellas... quizá te sea más útil!

Suerte!

[Andrecito]

Bueno, aqui pongo el link de desarrolloweb para q mire bien q el codigo y lo pruebe.

http://www.desarrolloweb.com/articulos/1015.php

[lcrecarey]

Gracias a todos por la colaboracion.
Estoy trabajando con todo lo que me habeis posteado.
En cuanto tenga noticias o dudas me teneis otra vez posteando.
Gracias

[lcrecarey]

hola de nuevo!
Me dirijo a jam1138 porque fue el que me comento que podía meter codigo php en el script.
El problema es que si comento el código php, me funciona la página en la que implemento todo esto.
Pero si no lo comento, se abre la ventana en blanco y pone listo en la barra de estado.
Si alguien sabe que es lo que estoy haciendo mal, le agradezco muchisimo su ayuda.

El script que tengo ahora es:

Código HTML:

<script language="JavaScript"> 

var i; 

function addOpt(oCntrl, sTxt, sVal, sCnd)
{ 
  if (sTxt.substr(0, sCnd.length).toUpperCase() == sCnd.toUpperCase())
   { 
      var selOpcion=new Option(sTxt, sVal); 
      eval(oCntrl.options[i++]=selOpcion); 
   } 
} 

function cambia(oCntrl)
{ 
   var txtVal = document.form_nueva_cita.paciente.value; 
   while(oCntrl.length > 0) 
   oCntrl.options[0]=null; 
   i = 0; 
   oCntrl.clear; 
<?
   include("conexion.phtml"); 
   $link_script=Conectarse(); 
   $paciente=mysql_query("select Nombre from Clientes",$link_script);
   while($row = mysql_fetch_array($paciente)) 
     { 	
       addOpt($oCntrl,$row['Nombre'],$row['Codigo'],$txtVal);
     } 
   mysql_free_result($paciente);
   mysql_close($link); 
?>
} 
</script> 

Y en el cuerpo de la página tengo:

Código PHP:

  include("conexion.phtml");  
$link=Conectarse();   
$codigo=mysql_query("select Nombre from doctores where Codigo='$new_doctor'",$link);  
   

porque lo utilizo para visualizar un mensaje informando del doctor y la fecha para la que se está creando la cita.
También tengo el formulario con el campo de texto en el que se debe introducir el nombre del paciente a buscar.
Pero yo creo que el problema está en el include.
¿Alguien podría socorrerme?

[lcrecarey]

Solo quería comentar que probé la solucion de desarrollo web, posteada por Andrecito. Pero para una base de datos con 7000 entradas es demasiado lento y nada eficaz.
Yo lo sigo intentando con la solucion de las FAQ. Pero ... ¡NO ME FUNCIONA EL CODIGO PHP!
¡No veo el fallo!
¡Estoy desesperada!

[jam1138]

Tienes un error al mandar a imprimir dentro de tu bucle:

Código PHP:

     while($row = mysql_fetch_array($paciente))  
     {      
        addOpt($oCntrl,$row['Nombre'],$row['Codigo'],$txtVal); 
     }  
   

Necesitas hacer un echo. Esto ya te lo puse en un código anterior... velo bien. Suerte!

[jam1138]

Iniciado por lcrecarey

(...) Me dirijo a jam1138 porque fue el que me comento que podía meter codigo php en el script.

(...)
Y en el cuerpo de la página tengo:

Código PHP:

  include("conexion.phtml");  
$link=Conectarse();   
$codigo=mysql_query("select Nombre from doctores where Codigo='$new_doctor'",$link);  
   

porque lo utilizo para visualizar un mensaje informando del doctor y la fecha para la que se está creando la cita.
También tengo el formulario con el campo de texto en el que se debe introducir el nombre del paciente a buscar.
Pero yo creo que el problema está en el include.
(...)

Épale!!!... solo aclarar que no puedes hacer algo como

Código:

onClick="<? if('algo') echo "algo" ?>"

... He visto esto un par de veces donde intentan hacer que de un evento que maneja JS manipular otro de PHP... esto es un rotundo NO... ... solo espero no me hayas entendido eso.

Ahora bien... los dos códigos están en la misma página??? ... si esta en la misma página con un solo include() basta... lo mismo podrias hacer una sola conexión e incluso una sola consulta. Cuestión de organizarse...

Personalmente no entiendo de lo que hablas... (doctores?, citas?, informes?) ... estamos viendo código y estoy viendo un select y un textarea... el empleo que ha de darseles solo tú sabes ... O nos cuentas el chisme (al fin chisme) ó hablemos en términos "generales" para poder entendernos... Al menos yo no entendí esa última parte de tu post...

La mejor de las suertes!

[lcrecarey]

Hola jam1138!
Gracias por tener tanta paciencia. Porque con tu ayuda conseguí que empezara a funcionar el chisme.
Con los arreglos de un sólo include, el echo, las comillas y un par de cosas más, consigo que en el select se seleccione lo escrito en el campo de texto. Pero hay un problema. Que actualmente hay 7000 clientes en la base de datos. Y están aumentando. Y cada vez que escribes un carácter tienes que esperar a que recorra el select un buen rato.
El código que tengo es:

Código HTML:

<?php
include("conexion.phtml"); 
$link=Conectarse();  
?>
<script language="JavaScript"> 
var i; 

function addOpt(oCntrl, sTxt, sVal, sCnd)
{ 
   if (sTxt.substr(0, sCnd.length).toUpperCase() == sCnd.toUpperCase())
    { 
        var selOpcion=new Option(sTxt, sVal); 
        eval(oCntrl.options[i++]=selOpcion); 
    } 
} 

function cambia(oCntrl)
{ 
   var txtVal = document.form_nueva_cita.paciente.value; 
   while(oCntrl.length > 0) 
       oCntrl.options[0]=null; 
   i = 0; 
   oCntrl.clear; 
   <?php  
      $paciente=mysql_query("select Codigo,Nombre from Clientes order by Nombre",$link);
      while($row = mysql_fetch_array($paciente)) 
        { 
           echo "addOpt(oCntrl,\"".$row['Nombre']."\",\"".$row['Codigo']."\",txtVal);";
        } 
      mysql_free_result($paciente); 
   ?>
} 
</script>  

<body bgcolor="#DDDDDD" onLoad="cambia(document.form_nueva_cita.select_paciente)">
<form name="form_nueva_cita" method="get" action="validar.php">
  (...)
  <strong>Paciente:</strong>
  <input type="text" name="paciente" size="50" onkeyup="cambia(document.form_nueva_cita.select_paciente)">
  <select name="select_paciente" >
    <option selected> Seleccione un paciente </option>
  </select>
  <input type="submit" value="Crear cita">
</form>	
</body> 

¿Este problema de que tarde puede ser debido a algún fallo en el código o sería cuestión de buscarle solución de otro modo?
Te agradezco de verdad todo lo que me has ayudado.
Se agradece que la gente que controla se moleste en enseñar al que no sabe.
¡GRACIAS!

[jam1138]

Iniciado por lcrecarey

(...) consigo que en el select se seleccione lo escrito en el campo de texto. Pero hay un problema. Que actualmente hay 7000 clientes en la base de datos. Y están aumentando. Y cada vez que escribes un carácter tienes que esperar a que recorra el select un buen rato. (...)

... Bueno, en principio ya funciona la cosa ¿cierto??... el problema ahora es que son 7000 registros y tarda en buscar... eso es caso obvio.. 7000!!! ... ....

Mira, ya sea consultando la base de datos ó recorriendo un select... manejar tal cantidad de registros te gasta recursos... es obvio... yo me desaria del echo de que una accion se vaya efectuando por cada tecla... .. más si se teclea rápido!!... ... no sé... quizá hacer eso de limitir los options de los selects al haber multiplos de 5 registros.. por ejmeplo (5, 10, 15, 20...) ... quizá por palabra (cada nuevo espacio consulta)... no sé, pero creo por ahí va... eso ó comprarte una PC de las que usa la NASA ...

Comentamos qué es lo que haz decidido ... pero eso sería cuestión de JavaScript... Lo mismo... busca en la FAQ y hay una donde te dice cuantos carácteres haz introducido en un textarea... puedes aplicar eso... ... SUERTE!!!

[Cluster]

En ese caso .. si tienes "7000" registros .. lo ideal es que crees buscadores para llegar a tu dato.

Por ejemplo .. abre una ventana para que ahí se busque el dato y entrega su resultado a la página padre y elemento que lo deseas ..

El caso es que no es viable hacer lo que pretendes de esa forma .. Con menos datos OK, pero con tanta cantidad .. debes enfocar el problema de otra forma.

Un saludo,