JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.5/angular-sanitize.min.js"></script>
<div ng-controller="testCtrl">
  <select-directive class="myInput" placeholder="type a name here">
    <select-template ng-repeat="option in names">
      <span ng-bind-html="option.firstName"></span>
      <span ng-bind-html="option.lastName"></span>
      <span ng-bind-html="option.designation"></span> 
    </select-template>
 
  
  </select-directive>
  
   
</div>



<script type="text/ng-template" id="select">
<input type="text" class="{{class}}" placeholder="{{placeholder}}"> 
</script>
<script type="text/ng-template" id="selectTemplate">
</script>

CSS

.myInput:focus{
  border:1px solid blue;
}
select-template{
  position:absolute;
  top:50px;
}
input{
  padding:5px;
}

JavaScript

var myapp = angular.module('testapp',['ngSanitize']);
myapp.controller('testCtrl',function($scope){
$scope.names = [
	{
  	"firstName":"Alaksandar Jesus",
    "lastName":"Gene",
    "designation":"Director"
  },
  {
  	"firstName":"Vinoth",
    "lastName":"Chilka",
    "designation":"Consultant"
  },
  {
  	"firstName":"Sumaiya",
    "lastName":"Farheen",
    "designation":"Developer"
  },
  {
  	"firstName":"Senthil",
    "lastName":"Kumar",
    "designation":"Developer"
  },
  ,
  {
  	"firstName":"Anjuga",
    "lastName":"Selvan",
    "designation":"PHP Developer"
  },
  {
  	"firstName":"Venkat",
    "lastName":"",
    "designation":"Sr.Developer"
  }

	]

})

myapp.directive('selectDirective',function(){

return {
templateUrl:'select',
link : function(scope,element,attribute){
scope.class=attribute.class;
scope.placeholder= attribute.placeholder
scope.options = attribute.options
}
}
});

myapp.directive('selectTemplate',function(){

return {

link : function(scope,element,attribute){

}
}
});