Buscar apartir de una seleccion de un input type search html

jhector04 · #1 (**permalink**) 29/08/2012, 10:07

buenas noches

Soy novato en html 5estoy tratanto de usar el input type search, ya logre llenarlo con el datalist tomado desde una base de datos, ahora lo que necesito es que con la seleccion que se haga se haga un busqueda en la base y llenar las demas cajas de texto

Si alguien sabe o tiene algun ejemplo le agradeceria su ayuda..

PD: es html5 con jsp

flashmax · #2 (**permalink**) 29/08/2012, 11:06

Muestra el código html jsp

jhector04 · #3 (**permalink**) 29/08/2012, 17:27

ok

el codigo que tengo hasta ahora es este:

<%@page import="java.sql.ResultSet"%>
<%@page import="clases.usuarios"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editar Usuario</title>

</head>

<body>

<div class="content">
<p> </p>
<form name="form1" method="get" action="procesaUsuario.jsp">
<fieldset>
<legend>DATOS DEL ALUMNO</legend><br>
<INPUT TYPE="hidden" NAME="txtId" size="4">
<label for="txtNombre">Buscar usuario:</label>
<datalist id="lista">
<%
usuarios user=new usuarios();
String id="";
ResultSet rs =user.consultarId("Select apellidos from usuarios order by apellidos");
while(rs.next()){
id=rs.getString("apellidos").toString();
out.println("<option value='"+id+"'>");
}
%>
</datalist>
<input name="txtbuscar" type="search" list="lista" placeholder="Escribe apellido para buscar" onchange="" autofocus size="60"><br><br>

<label for="txtNombre">Nombre:</label>
<input name="txtNombre" type="text" id="txtNombre" tabindex="1" size="25" required ><br><br>

<label for="txtApellidos">Apellidos:</label>
<input name="txtApellidos" type="text" id="txtApellidos" tabindex="2" size="50" required><br><br>
<label>Sexo:</label>
<label>
<input type="radio" name="btnSexo" value="Masculino" id="btnSexo" tabindex="3">
Masculino
</label>
<label>
<input type="radio" name="btnSexo" value="Femenino" id="btnSexo" tabindex="4">
Femenino</label>
<br><br>
<label for="lstDia">Fecha de Nacimiento:</label>
<select name="lstDia" id="lstDia" tabindex="5">
<option value="dia" selected>Dia</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="lstMes" id="lstMes" tabindex="6">
<option value="mes" selected>Mes</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="lstAño" id="lstAño" tabindex="7">
<option value="año" selected>Año</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
</select>
<br><br>
<label for="txtCalle">Calle y Número:</label>
<input name="txtCalle" type="text" id="txtCalle" tabindex="8" size="50"><br><br>
<label for="txtColonia">Colonia:</label>
<input name="txtColonia" type="text" id="txtColonia" tabindex="9" size="40"><br><br>
<label for="txtCiudad">Ciudad:</label>
<input type="text" name="txtCiudad" id="txtCiudad" tabindex="10"><br><br>
<label for="txtEstado">Estado:</label>
<input name="txtEstado" type="text" id="txtEstado" tabindex="11" size="20"><br><br>
<label for="txtCP">C.P.</label>
<input name="txtCP" type="text" id="txtCP" tabindex="12" size="6" maxlength="5"><br><br>
<label for="txtTelefono">Teléfono:</label>
<input name="txtTelefono" type="text" id="txtTelefono" tabindex="13" size="10" maxlength="10"><br>
</legend></fieldset>
<p> </p>

<input type="submit" value="Cancelar" class="fltrt" name="cmdEnviar" tabindex="24"/>
<input name="cmdEnviar" type="submit" class="fltrt" value="Guardar" tabindex="22"/>
<p> </p>
</form>
</div>

</body>
</html>

Con este codigo cargo el input type="search" con los registros de la base de datos, ahora lo que kiero es que al seleccionar uno de esos datos se complete la informacion en las otras cajas de text.

gracias