在新创建的输入中自动完成

Question

Hi am try create autocomplate for new generated input itemname... my autocomplete working fine with static input but when i add new itemname input text i want this current input have autocomplete

this code for create itemname input

<script type="text/javascript">
         function addField (argument) {
                var myTable = document.getElementById("crud_table");
                var currentIndex = myTable.rows.length;
                var currentRow = myTable.insertRow(-1);
          var count = 1;
         
          count = count + 1;
          var html_code = "<td id='row"+count+"'>";
                var itemname = document.createElement("input");
                itemname.setAttribute("name", "itemname" + currentIndex);
                itemname.setAttribute("placeholder", "البند");
                itemname.setAttribute("class","itemname form-control");
                itemname.setAttribute("onchange","getitem(this)");
                var currentCell = currentRow.insertCell(-1);
                currentCell.appendChild(itemname);
               }
      </script>

and this for the add button

<button type="button" name="add" onclick="addField();" class="btn btn-success btn-xs">+</button>

and this function for autocomplate

<script type='text/javascript'>
      $( "#itemname1" ).autocomplete({
        source: function( request, response ) {
          // Fetch data
          $.ajax({
            url: "<?=base_url()?>index.php/stores_operations/itemlist",
            type: 'post',
            dataType: "json",
            data: {
              search: request.term
            },
            success: function( data ) {
              response( data );
            }
          });
        },
        select: function (event, ui) {
          // Set selection
           
          $('#itemname1').val(ui.item.label); // display the selected text
          $('#q1').val(ui.item.value); // save selected id to input
          return false;
        }
      });

    };
    </script> 

how i cant catch the new itemname[] in autocomplete function???

Answer 1

Hello all after many search and trying to fix, i found the solution

in creation of new input

 var itemname = document.createElement("input");
                itemname.setAttribute("name", "itemname" + currentIndex);
                itemname.setAttribute("placeholder", "البند");
                itemname.setAttribute("class","itemname form-control");
  i add this ----> itemname.setAttribute("onFocus","getitem(this)");
                itemname.setAttribute("id","itemname" + currentIndex);


 <script type='text/javascript'>
i add this ---->   function getitem(x){
     
    var item = document.getElementById('itemname');
     // Initialize 
    $(x).autocomplete({
        source: function( request, response ) {
          // Fetch data
          $.ajax({
            url: "<?=base_url()?>index.php/stores_operations/itemlist",
            type: 'post',
            dataType: "json",
            data: {
              search: request.term
            },
            success: function( data ) {
              response( data );
            }
          });
        },
        select: function (event, ui) {
          // Set selection
           
          $(x).val(ui.item.label); // display the selected text
          //$('#q1').val(ui.item.value); // save selected id to input
          return false;
        }
      });

     }  
    </script>