以自動完成功能的形式添加行中斷

Question

在窗體中我有2個輸入。在第一個輸入中，我使用了一個datalist，我通過JSON加載它，第二個輸入在第一個輸入發生更改時自動完成。 直到這裏所有的作品！

然後我添加了一個添加按鈕，我添加了相同的行。問題是，因爲我使用id來選擇輸入，當我添加新行時，我有相同的ID ..所以自動完成不起作用..

我該如何解決這個問題？這裏jssFiddle。

counter = 0; 
 
var dataList = document.getElementById('products'); 
 
var jsonOptions = [{ 
 
    "product": "11111", 
 
    "description": "description 1" 
 
}, { 
 
    "product": "22222", 
 
    "description": "description 2" 
 
}, { 
 
    "product": "33333", 
 
    "description": "description 3" 
 
}]; 
 

 
jsonOptions.forEach(function(item) { 
 

 
    var option = document.createElement('option'); 
 

 
    option.value = item.product; 
 
    option.text = item.description; 
 

 
    dataList.appendChild(option); 
 

 

 
    $(function() { 
 
    $('#product').on('change keyup', function() { 
 

 
     var i = this.value; 
 
     var description = ""; 
 
     var productsInBox = 0; 
 

 
     jsonOptions.forEach(function(a) { 
 
     if (a.product == i) { 
 
      description = a.description; 
 
      productsInBox = a.productsInBox; 
 
     } 
 
     }); 
 
     $('#description').val(description); 
 

 

 
    }); 
 
    }); 
 

 
}); 
 

 

 

 
$('#form1') 
 
    // Add button click handler 
 
    .on('click', '.addButtonDED', function() { 
 
    counter++; 
 
    var $template = $('#addLineInDed'), 
 
     $clone = $template 
 
     .clone() 
 
     .removeClass('hide') 
 
     .removeAttr('id') 
 
     .attr('data-index', counter) 
 
     .insertBefore($template); 
 

 
    // Update the name attributes 
 
    $clone 
 
     .find('[name="product"]').attr('name', 'product-' + counter).end() 
 
     .find('[name="description"]').attr('name', 'description-' + counter).end() 
 

 

 
    }) 
 

 
    // Remove button click handler 
 
    .on('click', '.removeButtonDED', function() { 
 
    var $row = $(this).parents('.form-group'), 
 
     index = $row.attr('data-index'); 
 
    counter--; 
 
    // Remove element containing the fields 
 

 
    $row.remove(); 
 
    });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="form1" method="post" class="form-horizontal" role="form"> 
 
    <fieldset> 
 

 

 
    <div class="form-group"> 
 
     <div class="col-xs-2"> 
 
     <input type="text" id="product" list="products" class="form-control" name="product-0" /> 
 
     <datalist id="products"></datalist> 
 
     </div> 
 

 
     <div class="col-xs-4"> 
 
     <input id="description" type="text" class="form-control" name="description-0" /> 
 
     </div> 
 

 

 

 
     <div class="col-xs-1"> 
 
     <button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button> 
 
     </div> 
 
    </div> 
 

 

 
    <div id="addLineInDed" class="form-group hide"> 
 
     <div class="form-group"> 
 
     <div class="col-xs-2"> 
 
      <input type="text" id="product" list="products" class="form-control" name="product-0" /> 
 
      <datalist id="products"></datalist> 
 
     </div> 
 

 
     <div class="col-xs-4"> 
 
      <input id="description" type="text" class="form-control" name="description-0" /> 
 
     </div> 
 

 

 
     <div class="col-xs-1"> 
 
      <button type="button" class="btn btn-default removeButtonDED"><i class="fa fa-minus"></i></button> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="col-md-10 "> 
 
     <button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button> 
 
    </div> 
 

 
    </fieldset> 
 
</form>

Answer 1

使用類，重命名selecs數組值：

counter = 0; 
 
var dataList = $('.products'); 
 
var jsonOptions = [{ 
 
    "product": "11111", 
 
    "description": "description 1" 
 
}, { 
 
    "product": "22222", 
 
    "description": "description 2" 
 
}, { 
 
    "product": "33333", 
 
    "description": "description 3" 
 
}]; 
 

 
jsonOptions.forEach(function(item) { 
 

 
    var option = '<option value="' + item.product + '">' + item.description + '</option>'; 
 

 
    dataList.append(option); 
 
}); 
 

 
$(function() { 
 
    $('body').on('input', '.product,.products', function() { 
 

 
    var i = this.value; 
 
    var description = ""; 
 
    var productsInBox = 0; 
 

 
    jsonOptions.forEach(function(a) { 
 
     if (a.product == i) { 
 
     description = a.description; 
 
     productsInBox = a.productsInBox; 
 
     } 
 
    }); 
 
    $(this).closest('.form-group').find('.description').val(description); 
 

 

 
    }); 
 
}); 
 

 

 

 

 

 
$('#form1').on('click', '.addButtonDED', function() { 
 
    var $template = $('.form-group:last').clone(true, true).find('input').val('').end() 
 
    .find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end() 
 
    .find('i').removeClass('fa-plus').addClass('fa-minus').end(); 
 
    $template.insertAfter('.form-group:last'); 
 
    }) 
 

 
    // Remove button click handler 
 
    .on('click', '.removeButtonDED', function() { 
 
    var $row = $(this).closest('.form-group'); 
 
    $row.remove(); 
 
    });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form1" method="post" class="form-horizontal" role="form"> 
 
    <fieldset> 
 

 

 
    <div class="form-group"> 
 
     <div class="col-md-2"> 
 
     <input type="text" list="products" class="form-control product" name="product[]" /> 
 
     <datalist id="products" class="products"></datalist> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <input id="" type="text" class="form-control description" name=" description[]" /> 
 
     </div> 
 

 

 

 
     <div class="col-md-1"> 
 
     <button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-10 "> 
 
     <button type="submit" name="formAction" value="next" class="btn btn-primary">sUBMIT</button> 
 

 
    </div> 
 

 

 

 
    </fieldset> 
 
</form> 
 

 
</fieldset> 
 
</form>

讀取數值做一個循環：

foreach($_POST['product'] as $product) { 
//do stuf 
} 

Answer 2

，你說你已經嘗試使用類來看，

如何封裝你的代碼，讓你有一個像這樣的功能： 功能FilldatalistOptions（元，options）

然後，您可以使用不同編號的id（產品1和產品2）的2個數據列表。 並調用函數如下所示：

var dataList1 = document.getElementById('products1'); 
var dataList2 = document.getElementById('products2'); 
FilldatalistOptions(datalist1, jsonOptions); 
FilldatalistOptions(datalist2, jsonOptions);