jQuery 自动完成：使用类答案

【问题标题】：jQuery autocomplete: use classesjQuery 自动完成：使用类
【发布时间】：2013-05-14 02:15:35
【问题描述】：

我正在尝试在所有具有 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 很陌生，英语不是我的第一语言。

【问题讨论】：

标签： php jquery html jquery-ui mysqli

【解决方案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);
    });
});

【讨论】：

这几乎成功了！ :)。让我进一步解释。我在数据库中有以下 2 条记录： (id - matricula - nombre - paterno - materno) --> (1,'gacanepa','Gabriel','Canepa','Gonzalez'),(2,'gabanepa' ，“杰拉尔多”，“皮内达”，“马丁内斯”）。自动完成设置在“矩阵”字段中。它适用于所有具有“矩阵”类的文本框，但只有第一行填充了数据库中第一条记录中的数据。