Функция автозаполнения для динамического текстового поля

Question

У меня есть список динамически создаваемых текстовых полей. В первом текстовом поле я буду давать название продукта. Затем остальные текстовые поля должны автоматически заполняться связанным значением. Когда мы даем название продукта, когда мы начинаем печатать, оно должно дать мне соответствующее предложение в выпадающем списке. Я пытаюсь реализовать функцию автозаполнения здесь. Кто-нибудь может подсказать мне, как реализовать функцию автозаполнения? Также я хочу знать, как получить значения всех текстовых полей.

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

Answer 1

Используйте метод автозаполнения jquery, определив пользовательскую директиву в текстовом поле.

Проверь это-

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