How to include correctly an autocompletion inside js script?

Question

I try to include an autocompletion inside the js, but I don't exactly how to make that insite a js row of table.

There the element make.

note : $t is an increment element

    $products_specification_ajax = OSCOM::link('products_specification_ajax.php');

          $output = <<<EOD
        <script type="text/javascript"><!--


          var specification_row = $t; // increment element 
// call token-input js for autocompletion : data list



            $(document).ready(function() {
            $("#specificationName' + specification_row + '").tokenInput("{$products_specification_ajax}" ,
                {
                  tokenLimit: 1,
                  resultsLimit: 5,
                  onResult: function (results) {
                    $.each(results, function (index, value) {
                      value.name = value.id + " " + value.name;
                    });
                    return results;
                  }
                });
          });

-- create new js row with all element

          function addSpecificationValue() {
           html  = '<tr id="specification-row' + specification_row + '">';

           html += '<td>';

-- input autocompketion call
           html += '  <input type="text" name="products_specification[' + specification_row + '][name]" value="" id="specificationName' + specification_row + '" class="form-control token-input" />';


           html += '  <input type="hidden" name="product_specification[' + specification_row + '][specification_id]" value="" />';
           html += '</td>';  
        //remove    
            html += '  <td class="text-md-right"><button type="button" onclick="$(\'#specification-row' + specification_row + '\').remove();" data-toggle="tooltip" title="Remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
            html += '</tr>';

            $('#specification tbody').append(html);

            specification_row++;
        }
        </script>
    EOD;

the result in html

<script type="text/javascript"><!--
  var specification_row = 3;


    $(document).ready(function() {
    $("#specificationName' + specification_row + '").tokenInput("http://....../products_specification_ajax.php" ,
        {
          tokenLimit: 1,
          resultsLimit: 5,
          onResult: function (results) {
            $.each(results, function (index, value) {
              value.name = value.id + " " + value.name;
            });
            return results;
          }
        });
  });


  function addSpecificationValue() {
   html  = '<tr id="specification-row' + specification_row + '">';

//specification_name
   html += '<td>';
   html += '  <input type="text" name="products_specification[' + specification_row + '][name]" value="" id="specificationName' + specification_row + '" class="form-control token-input" />';
   html += '  <input type="hidden" name="product_specification[' + specification_row + '][specification_id]" value="" />';
   html += '</td>';

//specification_text
   html += '  <td>';
   html += '<div class="input-group"><span class="input-group-addon"><img src="language/en-gb/en-gb.png" title="English" /></span><textarea name="products_specification[' + specification_row + '][product_specification_description][1][text]" rows="5" placeholder="Text" class="form-control"></textarea></div>';
   html += '  </td>';


// customers id
    html += '<td>';
    html += '  <select name="products_specification[' + specification_row + '][customers_group_id]" class="form-control"><specification value="0">text_customers_group</specification><specification value="0">Client normal</specification><specification value="1">Tarifs 1</specification><specification value="99">Tous les groupes clients</specification></select>';
    html += '</td>';

//status 
    html += '<td>';
    html += '  <select name="products_specification[' + specification_row + '][status]" class="form-control">Array</select>';
    html += '</td>';

//remove    
    html += '  <td class="text-md-right"><button type="button" onclick="$(\'#specification-row' + specification_row + '\').remove();" data-toggle="tooltip" title="Remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
    html += '</tr>';

    $('#specification tbody').append(html);



    specification_row++;
}

score 0 · Answer 1 · answered Mar 25 '18 at 00:16

0

U need append that input with java to write document but need exact name for it or id to identify which one u write or you can change all input there is a property for inputs for autocompletion How to insert value of dynamically created input boxes into database https://www.w3schools.com/tags/att_input_autocomplete.asp Set the value of an input field

Many helpful stuffs.

answered Mar 25 '18 at 00:16

Coder994

1
5

thank for exaplanation, but js is my cup of thea, really not. little help will be appreciate – Zigoto Mar 25 '18 at 01:48

How to include correctly an autocompletion inside js script?

1 Answers1