Autocomplete feature for dynamic textbox

Question

I have a list of dynamically created textboxes. In the first text box I will be giving the product name. Then the other textboxes should get auto populated with the associated value. When giving the product name when we start typing then it should give me the appropriate suggestion in dropdown. I am trying to implement autocomplete functionality here. Can somebody guide me how to implement autocomplete functionality? Also i want to know how to get the values of all the textboxes.

HTML code:

<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 Code:

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

Answer 1

Use jquery autocomplete method by defining a custom directive on textbox.

Check this out-

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