php - jQuery autocomplete: use classes -
i trying call autocomplete function on textboxes class='matricula' when lose focus, boxes right populated data coming same record (the query use found in php files buscaralumno.php , alumno.php). thing is, way right when cursor leaves first textbox in first row, populates remaining textboxes - not first row. bottom line be: when enter @ least 2 letters in first textbox in each row, list suggesting possible values should pop (which right now) , when press tab key change focus next textbox, remaining textboxes should populated values of remaining fields. in other words, 1 row of textboxes corresponds record database.
<head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <link href="css/jqueryui.css" type="text/css" rel="stylesheet"/> <script> $(document).ready(function(){ $( ".matricula" ).autocomplete({ source: "buscaralumno.php", position: { my: "right bottom", at: "right top", collision: "flip" }, messages: { noresults: '', results: '' }, minlength: 2 }); $(".matricula").focusout(function(){ $.ajax({ url:'alumno.php', type:'post', datatype:'json', data:{ matricula:$('.matricula').val()} }).done(function(respuesta){ $(".nombre").val(respuesta.nombre); $(".paterno").val(respuesta.paterno); $(".materno").val(respuesta.materno); }); }); }); </script> </head> <form> <label for="matricula">matricula:</label> <input type="text" class="matricula" name="matricula" value=""/> <label for="nombre">nombre:</label> <input type="text" class="nombre" name="nombre" value=""/> <label for="paterno">paterno:</label> <input type="text" class="paterno" name="paterno" value=""/> <label for="materno">materno:</label> <input type="text" class="materno" name="materno" value=""/><br> <label for="matricula">matricula:</label> <input type="text" class="matricula" name="matricula" value=""/> <label for="nombre">nombre:</label> <input type="text" class="nombre" name="nombre" value=""/> <label for="paterno">paterno:</label> <input type="text" class="paterno" name="paterno" value=""/> <label for="materno">materno:</label> <input type="text" class="materno" name="materno" value=""/><br> </form>
any hints more appreciated. apologize if question poorly phrased. new jquery , english not first language.
try
$(".matricula").focusout(function(){ var $row = $(this), inputs = $row.nextuntil('.matricula', 'input'); $.ajax({ url:'alumno.php', type:'post', datatype:'json', data:{ matricula:$('.matricula').val()} }).done(function(respuesta){ inputs.filter(".nombre").val(respuesta.nombre); inputs.filter(".paterno").val(respuesta.paterno); inputs.filter(".materno").val(respuesta.materno); }); });
Comments
Post a Comment