Template Support

The suggestion list can be customized based on different needs using templates. The desired templates can be defined using the “e-template” property.

HTML

<input type="text" ej-autocomplete e-dataSource="dataList" e-fields-text="text" e-template="template" e-width="100%" />


   <script type="text/javascript">
          var mobileList = [
                { pName: "Galaxy Grand 2", quantity: "3" },
                { pName: "Galaxy S6", quantity: "5" },
                { pName: "IPhone S6", quantity: "8" },
                { pName: "Ipod Mini", quantity: "3" }, 
];
        angular.module('AutoCompleteApp', ['ejangular'])
             .controller('AutocompleteCtrl', function ($scope) {                
                 $scope.dataList = mobileList;
                 $scope.text="pName";
                 $scope.template="<div><div class='product-text'>${pName}</div> <span class='product-quantity' style='font-size:10px'> Quantity : ${quantity}</span></div>";
             });
    </script>

Run the above code to render the following output.