Question

我正在尝试使用class =＆＃39; matricula＆＃39;在所有文本框上调用自动完成功能。所以当他们失去焦点时，他们右边的方框将填充来自同一记录的数据（用于执行此操作的查询可在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很新，英语不是我的第一语言。

Answer 1

尝试

$(".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);
    });
});

jQuery自动完成：使用类

1 个答案: