como colocarle el mismo autocompletar a varios input

johhan16 · #1 (**permalink**) 10/02/2011, 13:06

necesito crear un mismo autocompletar que funcione con unos input que obtengo de un while pueden ser desde 6 hasta 16 input

he probado varios autocompleter que funcionan con un solo input pero al intentar colocarle el mismo a los demas no me funcionan.

alguien que pueda ayudarme

johhan16 · #2 (**permalink**) 10/02/2011, 13:56

por lo visto conseguir ayuda aqui en el foro de AJAX es algo complicado, este es el codigo que uso actualmente

JS

Código HTML:

function asignaVariables()
{
	// Funcion que asigna variables que se usan a lo largo de las funciones	
	v=1; nuevaBusqueda=1; busqueda=null; ultimaBusquedaNula=null;
	divLista=document.getElementById("lista");
	inputLista=document.getElementById("input_2");
	elementoSeleccionado=0;
	ultimoIdentificador=0;
}

function nuevoAjax()
{ 
	/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
	lo que se puede copiar tal como esta aqui */
	var xmlhttp=false; 
	try 
	{ 
		// Creacion del objeto AJAX para navegadores no IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
	}
	catch(e)
	{ 
		try
		{ 
			// Creacion del objet AJAX para IE 
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
		} 
		catch(E) { xmlhttp=false; }
	}
	if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); } 

	return xmlhttp; 
}

function eliminaEspacios(cadena)
{
	var x=0, y=cadena.length-1;
	while(cadena.charAt(x)==" ") x++;	
	while(cadena.charAt(y)==" ") y--;	
	return cadena.substr(x, y-x+1);
}


function formateaLista(valor)
{
	// Funcion encargada de ir colocando en negrita las palabras y asignarle un ID a los elementos
	var x=0, verificaExpresion=new RegExp("^("+valor+")", "i");
	
	while(divLista.childNodes[x]!=null)
	{
		// Asigo el ID para reconocerlo cuando se navega con el teclado
		divLista.childNodes[x].id=x+1;
		// Coloco en cada elemento de la lista en negrita lo que se haya ingresado en el input
		divLista.childNodes[x].innerHTML=divLista.childNodes[x].innerHTML.replace(verificaExpresion, "<b>$1</b>");
		x++;
	}
}

function limpiaPalabra(palabra)
{
	// Funcion encargada de sacarle el codigo HTML de la negrita a las palabras
	palabra=palabra.replace(/<b>/i, "");
	palabra=palabra.replace(/<\/b>/i, "");
	return palabra;
}

function coincideBusqueda(palabraEntera, primerasLetras)
{
	/* Funcion para verificar que las primeras letras de busquedaActual sean iguales al
	contenido de busquedaAnterior. Se devuelve 1 si la verificacion es afirmativa */
	if(primerasLetras==null) return 0;
	var verificaExpresion=new RegExp("^("+primerasLetras+")", "i");
	if(verificaExpresion.test(palabraEntera)) return 1;
	else return 0;
}

function nuevaCadenaNula(valor)
{
	/* Seteo cual fue la ultima busqueda que no arrojo resultados siempre y cuando la cadena
	nueva no comience con las letras de la ultima cadena que no arrojo resultados */
	if(coincideBusqueda(valor, ultimaBusquedaNula)==0) ultimaBusquedaNula=valor;
}

function busquedaEnBD()
{
	/* Funcion encargada de verificar si hay que buscar el nuevo valor ingresado en la base
	de datos en funcion de los resultados obtenidos en la ultima busqueda y en base a que
	la cadena bsucada anteriormente este dentro de la nueva cadena */
	var valor=inputLista.value;
	
	if((coincideBusqueda(valor, busqueda)==1 && nuevaBusqueda==0) || coincideBusqueda(valor, ultimaBusquedaNula)==1) return 0;
	else return 1;
}

function filtraLista(valor)
{
	// Funcion encargada de modificar la lista de nombres en base a la nueva busqueda
	var x=0;

	while(divLista.childNodes[x]!=null)
	{
		// Saco la negrita a los elementos del listado
		divLista.childNodes[x].innerHTML=limpiaPalabra(divLista.childNodes[x].innerHTML);
		if(coincideBusqueda(limpiaPalabra(divLista.childNodes[x].innerHTML), valor)==0)
		{
			/* Si remuevo el elemento x, el elemento posterior pasa a ocupar la posicion de
			x, entonces quedaria sin revisar. Por eso disminuyo 1 valor a x */
			divLista.removeChild(divLista.childNodes[x]);
			x--;
		}
		x++;
	}
}

function reiniciaSeleccion()
{
	mouseFuera(); 
	elementoSeleccionado=0;
}

function navegaTeclado(evento)
{
	var teclaPresionada=(document.all) ? evento.keyCode : evento.which;
	
	switch(teclaPresionada)
	{
		case 40:
		if(elementoSeleccionado<divLista.childNodes.length)
		{
			mouseDentro(document.getElementById(parseInt(elementoSeleccionado)+1));
		}
		return 0;
		
		case 38:
		if(elementoSeleccionado>1)
		{
			mouseDentro(document.getElementById(parseInt(elementoSeleccionado)-1));
		}
		return 0;
		
		case 13:
		if(divLista.style.display=="block" && elementoSeleccionado!=0)
		{
			clickLista(document.getElementById(elementoSeleccionado))
		}
		return 0;
		
		default: return 1;
	}
}	

function rellenaLista()
{
	var valor=inputLista.value;

	// Valido con una expresion regular el contenido de lo que el usuario ingresa
	var reg=/(^[a-zA-Z0-9.@ ]{2,40}$)/;
	if(!reg.test(valor)) divLista.style.display="none";
	else
	{
		if(busquedaEnBD()==0)
		{	
			// Si no hay que buscar el valor en la BD
			busqueda=valor;
	
			// Hago el filtrado de la nueva cadena ingresada
			filtraLista(valor);
			// Si no quedan elementos para mostrar en la lista
			if(divLista.childNodes[0]==null) { divLista.style.display="none"; nuevaCadenaNula(valor); }
			else { reiniciaSeleccion(); formateaLista(valor); }
		}
		else
		{	
			/* Si se necesita verificar la base de datos, guardo el patron de busqueda con el que se
			busco y luego recibo en una variable si existen mas resultados de los que se van a mostrar */
			busqueda=valor;

			var ajax=nuevoAjax();
			ajax.open("POST", "index_proceso.php?", true);
			ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			ajax.send("busqueda="+valor);
		
			ajax.onreadystatechange=function()
			{	
				if (ajax.readyState==4)
				{
					if(!ajax.responseText) { divLista.style.display="none"; }
					else 
					{
						var respuesta=new Array(2);
						respuesta=ajax.responseText.split("&");
				
						/* Obtengo un valor que representa si tengo que ir a BD en las proximas 
						busquedas con cadena similar */
						nuevaBusqueda=respuesta[0];
				
						// Si se obtuvieron datos los muestro
						if(respuesta[1]!="vacio") 
						{ 
							divLista.style.display="block"; divLista.innerHTML=respuesta[1]; 
							// Coloco en negrita las palabras
							reiniciaSeleccion();
							formateaLista(valor); 
						}
						// En caso contrario seteo la busqueda actual como una busqueda sin resultados
						else nuevaCadenaNula(valor);
					}
				}
			}
		}
	}
}

function clickLista(elemento)

{
	/* Se ejecuta cuando se hace clic en algun elemento de la lista. Se coloca en el input el
	valor del elemento clickeado */
	v=1;
	valor=limpiaPalabra(elemento.innerHTML); 
	busqueda=valor; inputLista.value=valor;
	divLista.style.display="none"; elemento.className="normal";
}


function mouseFuera()
{
	// Des-selecciono el elemento actualmente seleccionado, si es que hay alguno
	if(elementoSeleccionado!=0 && document.getElementById(elementoSeleccionado)) document.getElementById(elementoSeleccionado).className="normal"; 
}

function mouseDentro(elemento)
{
	mouseFuera();
	elemento.className="resaltado";
	// Establezco el nuevo elemento seleccionado
	elementoSeleccionado=elemento.id;
}

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Actualizacion del Sistema</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>

<body onload="asignaVariables();">

<table width="80%" border="0" align="center">
 
    
<?php 
$i; 
$i=1;
while($i<=$num_caballos) {
?>
    <tr>
    <td width="8%"><?php echo $i; ?></td>
    <td colspan="4">
    <input type="text" name="cuadro<?php echo $i; ?>" id="input_2" class="input"
	onFocus="if(document.getElementById('lista').childNodes[0]!=null && this.value!='') { filtraLista(this.value); formateaLista(this.value); 
	reiniciaSeleccion(); document.getElementById('lista').style.display='block'; }" 
	onBlur="if(v==1) document.getElementById('lista').style.display='none';" 
	onKeyUp="if(navegaTeclado(event)==1) {
	clearTimeout(ultimoIdentificador); 
	ultimoIdentificador=setTimeout('rellenaLista()', 1000); }">
      
                    <div id="demo" style="width:600px;">
                    <div id="demoDer">
                    <div id="lista" onmouseout="v=1;" onmouseover="v=0;"></div>
                    </div>
                    <div class="mensaje" id="error"></div>
                    </div>                  
   </td>
</tr>
<?php $i++; } ?>
</table>		
</body>
</html>

johhan16 · #3 (**permalink**) 10/02/2011, 19:50

bueno en vista que nadie contesto segui indagando hasta que logre hacerlo funcionar

utilice
http://www.brandspankingnew.net/spec...ocomplete.html

y solo tuve que modificar el index.php y agregarle unas lineas

Código PHP:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Autosuggest con AJAX v2.0</title> 
 
<script src="bsn.AutoSuggest_2.1.3.js" type="text/javascript"></script> 
<link  type="text/css" rel="stylesheet" href="autosuggest_inquisitor.css"> 
<script type="text/javascript"> 
function autosuggest(){ 
var options = { 
    script: "get_materiales.php?limit=6&", 
    varname: "materiales", 
    json:false, 
    maxresults:10, 
       timeout:9999, 
    noresults:'Ingresar nuevo material a la base de datos'  
    }; 
    <?php $e=1;  
    while($e <= 12) { 
    ?> 
var as = new bsn.AutoSuggest('materiales_input<?php echo $e; ?>',  options); 
 
    <?php $e++; } ?>                        
                            
                           } 
</script> 
</head> 
<body onload="autosuggest();"> 
 
<? 
include_once('../cone.php');  
$conn=conectarse(); 
if($_POST['materiales']!=''){ 
    $material=$_POST['materiales']; 
    $existe=mysql_query("SELECT * FROM suggest WHERE title ='$material'",$conn); 
                    if (mysql_num_rows($existe) == 0) mysql_query("INSERT INTO suggest (title) VALUES ('$material')",$conn);               
} 
?> 
<form action="<? echo $_SERVER['PHP_SELF'];?>"  method="post" id="formulario" name="form" > 
 
 
<table width="80%" border="0" align="center"> 
  <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
  </tr> 
   
  <?php  
  $i=1; 
  while($i <= 12) { 
   
  ?> 
  <tr> 
    <td><?php echo $i; ?></td> 
    <td><input type="text" style="width: 200px; " id="materiales_input<?php echo $i; ?>" name="materiales" autocomplete="off"></td> 
  </tr> 
  <?php $i++; } ?> 
    <tr> 
    <td><input type="submit" value="Submit" /></td> 
  </tr> 
</table> 
</form> 
 
</body> 
</html>

con esto me funciono sin problemas lo poco que he probado