Javascript jquery AutoComplate İnput not Working

Javascript jquery AutoComplate İnput not Working .I can try but not this. Add package link but AutoComplate İnput not Working. I want only add pack after autocomplete input working. Only this..I think insertCell Hard this.I dont understend this. id =’dap’

$(function() {
  var availableTags = [
    "arta",
    "barta",
    "barta2",
  ];


  $("#dap").autocomplete({
    source: availableTags
  });
});

JavaScript
​x
 
$(function() {
  var availableTags = [
    "arta",
    "barta",
    "barta2",
  ];
​
​
  $("#dap").autocomplete({
    source: availableTags
  });
});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title></title>
</head>

<body>
  <form method="post" action="add.php">
    <table id="table1">
      <tr>
        <br>
        <td colspan="4"><a onclick="myFunction1()" style=" color: #000; margin-top: 10px"><i></i> Paket Ekle</a>&nbsp;&nbsp; <a onclick="myDeleteFunction1()" style="color: #000; margin-top: 10px"><i ></i> Paket Sil</a></td>

      </tr>
      <tr>

        <td valign="bottom"><strong>GTIP No.</strong></td>

      </tr>
      <tr>

        <td><input name="dap" type="text" style="width:90%; margin-top: 15px"></td>
        <script>
          var i = 1;

          function myFunction1() {
            var table = document.getElementById("table1");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);


            cell1.innerHTML = "<input name='dap" + i + "'  id='dap'  type='text'  style='width:90%;margin-top:15px;' >";

            i++;
          }

          function myDeleteFunction1() {
            document.getElementById("table1").deleteRow(-1);
          }
        </script>
    </table>
  </form>
</body>

</html>

JavaScript
 
<html>
​
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title></title>
</head>
​
<body>
  <form method="post" action="add.php">
    <table id="table1">
      <tr>
        <br>
        <td colspan="4"><a onclick="myFunction1()" style=" color: #000; margin-top: 10px"><i></i> Paket Ekle</a>&nbsp;&nbsp; <a onclick="myDeleteFunction1()" style="color: #000; margin-top: 10px"><i ></i> Paket Sil</a></td>
​
      </tr>
      <tr>
​
        <td valign="bottom"><strong>GTIP No.</strong></td>
​
      </tr>
      <tr>
​
        <td><input name="dap" type="text" style="width:90%; margin-top: 15px"></td>
        <script>
          var i = 1;
​
          function myFunction1() {
            var table = document.getElementById("table1");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
​
​
            cell1.innerHTML = "<input name='dap" + i + "'  id='dap'  type='text'  style='width:90%;margin-top:15px;' >";
​
            i++;
          }
​
          function myDeleteFunction1() {
            document.getElementById("table1").deleteRow(-1);
          }
        </script>
    </table>
  </form>
</body>
​
</html>

Answer

You can use on to bind event on dynamically added element

$(function() {
  var availableTags = [
    "arta",
    "barta",
    "barta2",
  ];


  $(document).on('keydown.autocomplete', '#dap', function() {
    $(this).autocomplete({
      source: availableTags
    });
  });
});

JavaScript
 
$(function() {
  var availableTags = [
    "arta",
    "barta",
    "barta2",
  ];
​
​
  $(document).on('keydown.autocomplete', '#dap', function() {
    $(this).autocomplete({
      source: availableTags
    });
  });
});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title></title>
</head>

<body>
  <form method="post" action="add.php">
    <table id="table1">
      <tr>
        <br>
        <td colspan="4"><a onclick="myFunction1()" style=" color: #000; margin-top: 10px"><i></i> Paket Ekle</a>&nbsp;&nbsp; <a onclick="myDeleteFunction1()" style="color: #000; margin-top: 10px"><i ></i> Paket Sil</a></td>

      </tr>
      <tr>

        <td valign="bottom"><strong>GTIP No.</strong></td>

      </tr>
      <tr>

        <td><input name="dap" type="text" style="width:90%; margin-top: 15px"></td>
        <script>
          var i = 1;

          function myFunction1() {
            var table = document.getElementById("table1");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);


            cell1.innerHTML = "<input name='dap" + i + "'  id='dap'  type='text'  style='width:90%;margin-top:15px;' >";

            i++;
          }

          function myDeleteFunction1() {
            document.getElementById("table1").deleteRow(-1);
          }
        </script>
    </table>
  </form>
</body>

</html>

JavaScript
 
<html>
​
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title></title>
</head>
​
<body>
  <form method="post" action="add.php">
    <table id="table1">
      <tr>
        <br>
        <td colspan="4"><a onclick="myFunction1()" style=" color: #000; margin-top: 10px"><i></i> Paket Ekle</a>&nbsp;&nbsp; <a onclick="myDeleteFunction1()" style="color: #000; margin-top: 10px"><i ></i> Paket Sil</a></td>
​
      </tr>
      <tr>
​
        <td valign="bottom"><strong>GTIP No.</strong></td>
​
      </tr>
      <tr>
​
        <td><input name="dap" type="text" style="width:90%; margin-top: 15px"></td>
        <script>
          var i = 1;
​
          function myFunction1() {
            var table = document.getElementById("table1");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
​
​
            cell1.innerHTML = "<input name='dap" + i + "'  id='dap'  type='text'  style='width:90%;margin-top:15px;' >";
​
            i++;
          }
​
          function myDeleteFunction1() {
            document.getElementById("table1").deleteRow(-1);
          }
        </script>
    </table>
  </form>
</body>
​
</html>

Advertisement

Answer