Manuales de ajax y javascript tienes
aquí, este es un ejemplo sencillo del método sin ajax:
Código PHP:
$colores = array('Rojo', 'Verde', 'Amarillo', 'Morado', 'Marrón');
if (!empty($_POST))
{
print_r($_POST);
}
elseif (isset($_GET['buscar']))
{
echo '
<form method="get">
<input type="hidden" name="buscar" value="1" />
<input type="text" name="nombre" value="'.(isset($_GET['nombre']) ? $_GET['nombre'] : '').'">
<input type="submit" value="Buscar" />
</form>
';
if (isset($_GET['nombre']) && $_GET['nombre'])
{
$nombre = strtolower($_GET['nombre']);
$results = array();
foreach ($colores as $id => $valor)
{
if (strpos(strtolower($valor), $_GET['nombre']) !== false)
{
$results[$id] = $valor;
}
}
if ($results)
{
echo '
<script type="text/javascript">
//<![CDATA[
formu = window.opener.document.forms["formu"];
nombres = window.opener.document.getElementById("nombres");
function agregarNombre(id, nombre)
{
if (id && nombre)
{
divid = window.opener.document.getElementById("nombre_"+id);
if (!divid || divid.innerHTML.length == 0)
{
var add = \'<div id="nombre_\'+id+\'"> <input type="hidden" name="nombres[]" value="\'+id+\'" /> \'+nombre+\' <a href="#" onClick="eliminarNombre(\'+id+\')" style="color:blue;size:small;">eliminar</a> </div>\';
if (!divid)
{
nombres.innerHTML = nombres.innerHTML + add;
}
else
{
divid.innerHTML = add;
}
}
}
return false;
}
//]]>
</script>
';
asort($results);
foreach ($results as $id => $valor)
{
echo '<a href="#" onClick="agregarNombre(\''.$id.'\', \''.$valor.'\')" style="color:blue;">'.$valor.'</a><br />';
}
}
else
{
echo 'Sin resultados';
}
}
}
else
{
echo '
<script type="text/javascript">
//<![CDATA[
function ventanaBuscar()
{
window.open(\''.$_SERVER['SCRIPT_NAME'].'?buscar=1\', \'buscar_nombre\', \'toolbar=no, status=no, width=400, height=200\');
return false;
}
function eliminarNombre(id)
{
divid = document.getElementById("nombre_"+id);
if (divid)
{
divid.innerHTML = "";
}
return false;
}
//]]>
</script>
';
echo '
<form name="formu" method="post">
<strong>Nombres</strong>
<a href="#" onClick="ventanaBuscar();" style="color:blue;">Buscar</a>
<div id="nombres"></div>
<br />
<input type="submit" value="Enviar" />
</form>
';
}