0

我正在尝试在所有带有 class='matricula' 的文本框上调用自动完成功能，这样当它们失去焦点时，它们右侧的框将填充来自同一记录的数据（找到我用来执行此操作的查询在 php 文件 buscaralumno.php 和 alumno.php 中）。问题是，当光标离开第一行的第一个文本框时，它现在的方式是填充所有剩余的文本框 - 不仅仅是第一行。所以底线是：当我在每行的第一个文本框中输入至少 2 个字母时，应该会弹出一个建议可能值的列表（这就是它现在所做的），并且当我按下 tab 键将焦点更改为下一个文本框，其余文本框应填充剩余字段的值。换句话说，

<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>

任何提示将不胜感激。如果这个问题措辞不当，我深表歉意。我对 jQuery 相当陌生，英语不是我的第一语言。

4

1 回答 1

0

尝试

$(".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);
    });
});
于 2013-05-14T03:17:53.117 回答