动态文本框的自动完成功能答案

【问题标题】：Autocomplete feature for dynamic textbox动态文本框的自动完成功能
【发布时间】：2015-08-30 20:18:06
【问题描述】：

我有一个动态创建的文本框列表。在第一个文本框中，我将给出产品名称。然后其他文本框应该自动填充相关的值。当我们开始输入产品名称时，它应该在下拉列表中给我适当的建议。我正在尝试在这里实现自动完成功能。有人可以指导我如何实现自动完成功能吗？我也想知道如何获取所有文本框的值。

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: '' });
};

【问题讨论】：

标签： angularjs autocomplete dynamic-text

【解决方案1】：

通过在文本框上定义自定义指令来使用 jquery 自动完成方法。

看看这个-

http://jsfiddle.net/sebmade/swfjT/light/

【讨论】：