javascript - 自动完成 Jquery 多行

Question

我有一个包含多行和多列的表，但我不知道如何使用 Jquery 的自动完成插件，以便仅自动完成所选的行。这是表代码:

<table class="participante estilizar" id="participante_<?php echo $i?>" cellspacing="0" width="100%">
    <tbody>
        <tr>
            <td>
                <label for="cedula">Cédula</label><input class="cedula" onkeypress="return numeros(event)" type="text" maxlength="50" name="participante_cedula[]" value="<?php echo $value->cedula?>" />
            </td>
            <td>
                <label for="nombre">Nombre y apellido</label><input class="nombre" onkeypress="return alfa(event)" type="text" maxlength="75" name="participante_nombre[]" value="<?php echo $value->nombre?>" />
            </td>
            <td>
                <label for="correo">Correo</label><input class="correo" type="text" maxlength="50" name="participante_correo[]" value="<?php echo $value->correo?>" />
            </td>
        </tr>
    </tbody>
</table>

我知道我应该使用标签 id 来标识表的每一行，但在这种情况下我不知道如何调用自动完成插件。这是自动完成代码:

var sug_cedula = [
    {
        label: "123",
        nombre: "Juan",
        correo: "juan@cuenta.com"
    },
    {
        label: "456",
        nombre: "Pedro",
        correo: "pedro@cuenta.com"
    },
    {
        label: "789",
        nombre: "Angel",
        correo: "angel@cuenta.com"
    }
];
$( ".cedula" ).autocomplete({
    minLength: 0,
    source: sug_cedula,
    focus: function( event, ui ) {
        return false;
    },
    select: function( event, ui ) {
        $( ".cedula" ).val( ui.item.label );
        $( ".nombre" ).val( ui.item.nombre );
        $( ".correo" ).val( ui.item.correo );
        return false;
    }, 
});

在我的示例中，当我输入一些字符并选择一个选项时，该函数会自动补全具有相同值的所有表，因为我使用的是标签类而不是标签 ID。有人可以帮助我吗？

Answer 1

如果您只想设置当前行的当前值，您可以这样做:

$( ".cedula" ).autocomplete({
   minLength: 0,
   source: sug_cedula,
   focus: function( event, ui ) {
       return false;
   },
   select: function( event, ui ) {
    var thisRow = $(this).parents("tr");
    thisRow.find(".cedula").val( ui.item.label );
    thisRow.find(".nombre").val( ui.item.nombre );
    thisRow.find(".correo").val( ui.item.correo );
    return false;
   }, 
});