angularjs - Autocomplete feature for dynamic textbox -


i have list of dynamically created textboxes. in first text box giving product name. other textboxes should auto populated associated value. when giving product name when start typing should give me appropriate suggestion in dropdown. trying implement autocomplete functionality here. can guide me how implement autocomplete functionality? want know how values of 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: '' }); }; 

use jquery autocomplete method defining custom directive on textbox.

check out-

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


Comments

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

javascript - Function overwritting -

php - Find a regex to take part of Email -