Как реализовать Autocomplete

159
14 марта 2017, 15:03

таблица

<table class="table table-bordered table-hover" id="tab_logic">
          <thead>
          <tr>
            <th><?php echo $text_product_name; ?></th>
            <th><?php echo $text_model; ?></th>
            <th><?php echo $text_price; ?></th>
            <th><?php echo $text_count; ?></th>
            <th><?php echo $text_in_total; ?></th>
            <th> <a id="add_row" class="pull-left"><i  class="fa fa-plus" aria-hidden="true"></i></a></th>
          </tr>
          </thead>
          <tbody>
          <tr id='addr0'>
            <!--<th class="col-sm-3">
              <input type="text" name="product_name" id="tags" required class="form-control">
            </th>
            <td class="col-sm-3">
              <input type="text" name="model_product" class="form-control">
            </td>
            <td >
              <input type="text" name="total" required class="form-control" id="i1"  onchange='simplecheckout_reload(this);'>
            </td>
            <td >
              <img src="/catalog/view/theme/default/assets/images/add/minus.png" border="0" onclick="jQuery(this).next().val(~~jQuery(this).next().val()-1); simplecheckout_reload(this);">
              <input type="text" name="quantity" id=i2  value="1" size="1" onchange='simplecheckout_reload(this);'>
              <img src="/catalog/view/theme/default/assets/images/add/plus.png" border="0" onclick="jQuery(this).prev().val(~~jQuery(this).prev().val()+1);simplecheckout_reload(this);">
            </td>
            <td >
              <input type="number" name="oll_total" id=i3>
            </td>
            <td>
            </td>
          </tr>-->
          <tr id='addr1'></tr>
          </tbody>
        </table>

js

$(document).ready(function(){
var flowers = ["Астра", "Нарцисс", "Роза", "Пион", "Примула",
    "Подснежник", "Мак", "Первоцвет", "Петуния", "Фиалка"];
var i=1;
    $("#add_row").click(function(){
        $('#addr'+i).html("<td><input type='text'  id='tags' name='product_name[]' autocomplete='on' required class='form-control'></td>" +
            "<td><input name='model_product[]' type='text'  class='form-control' /></td>" +
            "<td><input type='text' name='total[]' required class='form-control' id='i1'  onchange='simplecheckout_reload(this);'></td>" +
            "<td><img src='/catalog/view/theme/default/assets/images/add/minus.png' border='0' onclick='jQuery(this).next().val(~~jQuery(this).next().val()-1); simplecheckout_reload(this);'>" +
            "<input type='text' name='quantity[]' id=i2  value='1' size='1' onchange='simplecheckout_reload(this);'>" +
            "<img src='/catalog/view/theme/default/assets/images/add/plus.png' border='0' onclick='jQuery(this).prev().val(~~jQuery(this).prev().val()+1);simplecheckout_reload(this);'></td>" +
            "<td><input type='text' name='oll_total[]' id=i3></td>" +
            "<td><a id='delete_row' style='margin-right:30%;' class='pull-right minus'><i class='fa fa-minus' aria-hidden='true'></i></a></td></td>");
        $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
        i++;
    });
    $("#delete_row").click(function(){
        if(i > 1 ){
            $("#addr"+(i-1)).html('');
            i--;
        }
    });
    $('#tags').autocomplete({
        source: flowers
    });
});
 jQuery(document).on('click', '.minus', function(){
  jQuery( this ).closest( 'tr' ).remove();});
  function simplecheckout_reload(element){
    var row = $(element).closest("tr");
    var n1 = row.find("input[name='total[]']").val();
    var n2 = row.find("input[name='quantity[]']").val();
    row.find("input[name='oll_total[]']").val(Number(n1) * Number(n2));
}

получается при нажатие на плюс выпадает форма с полями, хочу сделать что в поле

<input type='text'  id='tags' name='product_name[]' autocomplete='on' required class='form-control'></td>" + 

при воде выводились список товаров, если делать это в самой таблице

              <input type="text" name="product_name" id="tags" required class="form-control">

то список повыпадает, а в первом варианте нет, не подскажите как это сделать.

Answer 1

Вам уже объясняли про выборку по id.

class='tags' // везде вместо id='tags'

$('.tags').autocomplete({source: flowers});

$("#add_row").click(function(){
  ...
  $('#addr'+i).find('.tags').autocomplete({source: flowers});
  i++;
});
READ ALSO
Принцип работы роутера в CMS

Принцип работы роутера в CMS

Имеем такой роутер

200
Навигация между экранами React Native (Android)

Навигация между экранами React Native (Android)

Как сделать навигацию между двумя экранами в react native?

252
Передача value из input в input [требует правки]

Передача value из input в input [требует правки]

Имеется каталог товаровУ каждого товара есть кнопка заказать, по нажатию на которую появляется форма обратной связи

254
Как перемешать строки текста в textarea на JQuery

Как перемешать строки текста в textarea на JQuery

ЗдравствуйтеПомогите перемешать строки в textarea средствами только JQuery

286