1
我有一個動態創建的文本框的列表。在第一個文本框中，我將給出產品名稱。然後其他文本框應該使用關聯的值自動填充。當我們開始輸入時給出產品名稱時，它應該在下拉菜單中給我適當的建議。 我想在這裏實現自動完成功能。 有人可以指導我如何實現自動完成功能？ 另外我想知道如何獲取所有文本框的值。動態文本框的自動完成功能
HTML代碼：
<table class="data-table">
<tr>
<th>Product/Service</th>
<th>Description</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Discount</th>
<th>Total Price</th>
</tr>
<tr></tr>
<tr ng-repeat="Product in Products">
<td><input type="text" ng-model="Product.ProductName" aria-labelledby="select_{{$index}}" onkeypress="addProducts()" /></td>
<td><input type="text" ng-model="Product.ProductDesc" aria-labelledby="select_{{$index}}" /></td>
<td><input type="text" ng-model="Product.UnitRate" aria-labelledby="select_{{$index}}" /></td>
<td><input type="text" ng-model="Product.Quantity" aria-labelledby="select_{{$index}}" /></td>
<td><input type="text" ng-model="Product.Discount" aria-labelledby="select_{{$index}}" /></td>
<td><input type="text" ng-model="Product.TotalAmount" aria-labelledby="select_{{$index}}" /></td>
<td><button ng-click="removeProduct(Product)">X</button></td>
</tr>
<tr>
<td><button ng-click="addProducts()">Add Products</button></td>
</tr>
</table>
JS代碼：
$scope.Products = [
{ ProductName: '', ProductDesc: '', UnitRate: '' ,Quantity: '' ,Discount: '' }
];
$scope.removeProduct = function (ProductToRemove) {
var index = $scope.Products.indexOf(ProductToRemove);
$scope.Products.splice(index, 1);
};
$scope.addProducts = function() {
$scope.Products.push({ ProductName: '', ProductDesc: '', UnitRate: '', Quantity: '', Discount: '' });
};