jQuery自動完成：使用類

我試圖在class ='matricula'的所有文本框上調用自動完成功能，這樣當它們失去焦點時，右邊的框將填充來自相同記錄的數據（查詢我用來做到這一點是在php文件buscaralumno.php和alumno.php中找到）。問題在於，當光標離開第一行的第一個文本框時，它會填充所有剩餘的文本框 - 而不僅僅是第一行。所以底線是：當我在每行的第一個文本框中輸入至少兩個字母時，會彈出一個建議可能值的列表（現在就是這樣），當我按Tab鍵更改焦點時到下一個文本框中，其餘文本框應填入剩餘字段的值。換句話說，一行文本框對應於來自數據庫的記錄。jQuery自動完成：使用類

<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相當陌生，英文不是我的第一語言。

來源

2013-05-14 gacanepa

嘗試

$(".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-14 03:17:53

，幾乎沒有的伎倆！ :)。讓我進一步解釋。我在數據庫中有以下2條記錄：（1，'gacanepa'，'Gabriel'，'Canepa'，'Gonzalez'），（2，'gabanepa' ， '赫拉爾'， '皮內達'，'馬丁內斯）。自動完成設置在'matricula'字段中。它適用於所有帶有「matricula」類的文本框，但只有第一行填充了數據庫中第一條記錄的數據。 – gacanepa 2013-05-14 13:09:34

jQuery自動完成：使用類

回答

相關問題