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.
<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.
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page