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

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -