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

I have been struggling with this for a while now and I feel like the solution cannot be that difficult but I haven't gotten anywhere. I have a search bar that searches for ingredients stored in a database, and it works.

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>

When it comes to add_row(); this is where I start to experience problems. I want the user to be able to add another ingredient and I want the input to search through the ingredients just like the first one, but whenever I add a new row it does not work. This is the code for the add_row() function:

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 contains the following code:

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

EDIT: My problem is basically that when a new row is added, the input does not display search results like the first row does

CodePudding user response：

I see two main problems:

IDs are unique. You are re-using the inputProductName ID when each row is added. Use a class or ensure IDs are always unique.
You are only calling $("#inputProductName").autocomplete(...) once, on page load. I'm not familiar with this API, but you likely need to call the function again after the new row is added.

Putting these suggestions together:

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