自動完成表格中的所有行

Question

我可以在表的第一行中獲取值的自動完成列表，但在下一行中不進行填充。 我想填充自動完成以填充在while循環創建的所有行中。.任何幫助建議都將受到高度贊賞。

我考慮過使用創建一個函數（onkeyup）來調用自動完成功能，並將其嵌入到我的輸入字段中，以使其在所有行上都能正常工作。

我了解自動完成功能已綁定到元素的輸入ID，並且在第一行之后生成的下一行會發生變化，

如何處理這種情況？

function getPath($id)
{
    echo "<table border='1px' width=650>";
    echo "<tr>";
    echo "<th width=120>Designation</th>";
    echo "</tr>";     
    echo "<br>";
    $sql1 = mysql_query("select * from t_path where f__id=$id");

    while($res  = mysql_fetch_array($sql1))
    {

        echo "<tr>";
        echo "<td width=120><input type='text' name='change_desig' id = 'Designation' value='".$res['f_designation']."' onblur=updateDesigninDb(this.value,'".$res['f_start_dt']."',".$id.")></td>";
        echo "</tr>";

    }
    echo "</table>";
}



getPath($id);

?>

<!--Script to update data in DB ----------------------------------->
 <script type="text/javascript">
 function updateDesigninDb(designation)
  {
    var baseurl = "/updateDB.php";
     $.ajax({
        type: "POST",
        dataType: "html",
        url: baseurl,
        data: "designation="+designation                                            
        ,
        success: function(userDetails){

        }
          });


       }
    </script>

   <SCRIPT LANGUAGE='javascript'>

       var designation=[
        <?php
         $load = mysql_query("select f_designation from t_designation_master;");
         while($arr = mysql_fetch_array($load))
         {

           echo "'".$arr[0]."',";
         }
        ?>

     ].sort();

          AutoComplete_Create('Designation',designation);
              </script>

Answer 1

不確定，但是可能是因為您在while循環中的所有輸入都具有相同的ID =“ Designation”...。只能有一個具有特定ID的元素，它們必須是唯一的。 也許在while循環開始時添加索引$ i = 0，在循環結束時增加索引$ i ++並更改id =“ Designation”。$ i ...或通過類名添加自動完成功能？

Answer 2

您應該在所有輸入上使用通用類，而不要使用相同的ID。

就像是：

echo "<td width=120><input type='text' class='autocomplete_input' value='".$res['f_designation']."' onblur=updateDesigninDb(this.value,'".$res['f_start_dt']."',".$id.")></td>";

如果每個輸入都需要id，我建議添加一個名稱+自動遞增數字作為id。

如果您使用的是Jquery，則可以將自動完成功能應用於所有這些對象，如下所示：

$(".autocomplete_input").autocomplete({source: url}); //url of the script that returns all the autocomplete values.