添加新行时如何调用以 $ 开头的 JavaScript 函数？

Question

我已经为此苦苦挣扎了一段时间，我觉得解决方案不会那么困难，但我还没有取得任何进展。我有一个搜索栏，可以搜索存储在数据库中的成分，而且它有效。

JavaScript

    $(function() {
        $( "#inputProductName" ).autocomplete({
        source: 'ajax-city-search.php',
        }); 
    });

HTML

<p id='ingredients'><strong>What ingredients are in your recipe?</strong></p>
        <table id='ingredient_table'>
        <tr id="row1">
            <td><input id="inputProductName" type='text'  name='ingredient[]' placeholder="Enter an ingredient" required></td>
        </tr>
    </table>
        <p><input type="button" onclick="add_row();" value="Add Another Ingredient"></p>

说到add_row()；这是我开始遇到问题的地方。我希望用户能够添加另一种成分，并且我希望输入像第一个成分一样搜索成分，但是每当我添加新行时它都不起作用。这是 add_row() 函数的代码：

function add_row() {
 $rowno=$("#ingredient_table tr").length;
 $rowno=$rowno+1;
 $("#ingredient_table tr:last").after("<tr id='row"+$rowno+"'><td><input id='inputProductName' type='text'  name='ingredient[]' placeholder='Enter an ingredient' required></td><td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}

ajax-city-search.php 包含以下代码：

function get_ingredient($conn , $term){
    $query = "SELECT * FROM Ingredients WHERE IngredientName LIKE '%".$term."%'";
    $result = mysqli_query($conn, $query);
    $data = mysqli_fetch_all($result,MYSQLI_ASSOC);
    return $data;
}

if (isset($_GET['term'])) {
    $getIngredient = get_ingredient($conn, $_GET['term']);
    $ingredientList = array();
    foreach($getIngredient as $ingredient){
        $ingredientList[] = $ingredient['IngredientName'];
    }
    echo json_encode($ingredientList);
}

编辑：我的问题基本上是当添加新行时，输入不会像第一行那样显示搜索结果

Answer 1

我看到两个主要问题：

ID 是唯一的。添加每一行时，您是 re-using inputProductName ID。使用 class 或确保 ID 始终是唯一的。
您只在页面加载时调用 $("#inputProductName").autocomplete(...) 一次。我对此不熟悉API，但您可能需要在添加新行后再次调用该函数。

综合这些建议：

$(function() {
  $("#inputProductName1").autocomplete({
    source: 'ajax-city-search.php',
  }); 
});

<p id='ingredients'><strong>What ingredients are in your recipe?</strong></p>
  <table id='ingredient_table'>
  <tr id="row1">
    <td><input id="inputProductName1" type='text'  name='ingredient[]' placeholder="Enter an ingredient" required></td>
  </tr>
</table>
  <p><input type="button" onclick="add_row();" value="Add Another Ingredient"></p>

function add_row() {
  $rowno=$("#ingredient_table tr").length;
  $rowno=$rowno+1;
  $("#ingredient_table tr:last").after(`
    <tr id='row${$rowno}'>
      <td><input id='inputProductName${$rowno}' type='text' name='ingredient[]' placeholder='Enter an ingredient' required></td>
      <td><input type='button' value='DELETE' onclick=delete_row('row${$rowno}')></td>
    </tr>
  `);
  $("#inputProductName" + $rowno).autocomplete({
    source: 'ajax-city-search.php',
  }); 
}

添加新行时如何调用以 $ 开头的 JavaScript 函数？

How can I call this JavaScript Function that starts with $ when I add a new row?

javascript

php

mysql

ajax