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;
   }, 
});

自动完成Jquery多行

1 个答案: