kneerunjun/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Inclusion and references

For this to work there are some support libraries and frameworks that you need to include. I suspect you might have already included the same unless you are starting afresh. But here is for the sake of being specific.
Please include searchbarJs and searchbar.css for the search bar to work as expected.
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <!--this is what is needed to include when you want to access the search bar-->
    <script src="http://vpunplepun2-01:8082/searchbar/searchbar.js"></script>
    <link rel="stylesheet" href="http://vpunplepun2-01:8082/searchbar/searchbar.css">
 Please see I'm currently making this custom control avilable only over intranet in my domain, but once this is running without any bugs I would want to move this to public cloud.


The code below shows your angular needs support. The searchbar runs in the container app "app.searchbar"
var myApp = angular.module("myApp",["app.searchbar"])
Field to display in the suggestions

Search bar displays suggestions for a certain field. The collections of search can be complex objects but the search bar can be customized in the manifestation for displaying a certain field in the suggestions list.
<!--please make a note the field value is a string -->
<search-bar disp-field="'alias'"></search-bar>
and that would get the object.alias for the display list in the suggestions
Getting the selected item from suggestions

Just tune into the attribute : 'sel-item' and you are done!
<!--please make a note the field value is a string -->
<search-bar sel-item="selEmp"></search-bar>
$scope.selEmp = null; 
$scope.$watch('selEmp', function(newValue, oldValue){
  console.log("we have selected the new employee from the suggestion:" + newValue.alias);
});
custom inject service call

I agree, that this control though can be a re-use candidate, the service that does the search cannot be. Services are injectables and dependency injection pattern is waiting to be employed here. From your main controller just inject the service call in the attribute 'service-call'. Directive expects this service call to use promises and even has a waiting animation in the suggestions flyout!
Here is the manifestation
<search-bar service-call='empServiceCall(phrase)'></search-bar>
and from the mainController (or any other controller that encircles the directive here is what it would look like
$scope.empServiceCall = function(phrase){
 return empService.getLikeEmp(phrase); //returns the promise from function call below
}
dont forget the overlay styling

  <table class="result-table"></table>
notice the class result-table on the table. just slap this so that the search suggestions overlay the table. This class is a part of searchbar.js

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <!--this is what is needed to include when you want to access the search bar-->
    <script src="http://vpunplepun2-01:8082/searchbar/searchbar.js"></script>
    <link rel="stylesheet" href="http://vpunplepun2-01:8082/searchbar/searchbar.css">
  </head>

  <body ng-app='myapp' ng-controller='mainController'>
    <h1>Hello Plunker!</h1>
    <div class="col-md-6 col-md-offset-3">
      <!--here is the manifestation of the directive-->
      <search-bar disp-field="'alias'" service-call='empServiceCall(phrase)' sel-item='selEmp'></search-bar>
      <!--this is the table that woudl be overlapped by the search suggestions-->
      <table class="result-table table table-striped table-condensed">
        <thead>
          <tr><th>emp</th><th>email</th><th>alias</th><th>location</th></tr>  <table class="result-table table table-striped table-condensed">
        </thead>
        <tbody>
          <tr><td>1</td><td>emp1@enterprise.com</td><td>emp1</td><td>location</td></tr>
          <tr><td>2</td><td>emp2@enterprise.com</td><td>emp2</td><td>location</td></tr>
          <tr><td>3</td><td>emp3@enterprise.com</td><td>emp3</td><td>location</td></tr>
          <tr> <td>4</td><td>emp4@enterprise.com</td><td>emp4</td><td>location</td></tr>
          <tr><td>5</td><td>emp5@enterprise.com</td><td>emp5</td> <td>location</td> </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

## script.js
(function(){
  //notice how i add the dependency of te searchbar app in the application here
  var myApp = angular.module("myApp",["app.searchbar"])
  .controller("mainController", function($scope,empService){
    //this is going to be delegated to the directive below
    $scope.empServiceCall = function(phrase){
     return empService.getLikeEmp(phrase); //returns the promise from function call below
    }
    $scope.selEmp = null; //this is where the search bar would return the selected item
    //and now since you have connected the selEmp to the selItem on the manifestation of the directive
    //here is hwo you can read that value when the selection changes.
    $scope.$watch('selEmp', function(newValue, oldValue){
      //this is fires when the user is making some changes to the selected item
       if(newValue!=null){
        console.log("we have selected the new employee from the suggestion:" + newValue.alias);
       }
    });
  })
  .service("empService", function($timeout, $http, $q){
    //this is the service that gets the employees
    //this data should actually come from the server / store , but for convenience im just puttin this out here
    this.getLikeEmp = function(phrase){
       var data = [{empid: 1,alias: "mark",email: "mark@enterprise.com",location: "location1"},
       {empid: 1,alias: "benson",email: "benson@enterprise.com",location: "location1"},
       {empid: 1,alias: "anthony",email: "anthony@enterprise.com",location: "location1"},
       {empid: 1,alias: "michelle",email: "michelle@enterprise.com",location: "location1"},
       {empid: 1,alias: "micheal",email: "micheal@enterprise.com",location: "location1"},
       {empid: 1,alias: "tuchy",email: "tuchy@enterprise.com",location: "location1"},
       {empid: 1,alias: "didi",email: "didi@enterprise.com",location: "location1"},
       ]; //we are jus making some dummy data
      var deferred = $q.defer();
      //for the sake of brevity im just mocking up the service call with a timeout interval
      $timeout(function() {
        var filtered = [];
        for (var i = 0; i < data.length; i++) {
          if (data[i].alias.indexOf(phrase) > -1 || data[i].alias == phrase) {
            filtered.push(data[i]); //this should get all the names whose alias does have the phrase or the alias is equal to the phrase
          }
        }
        deferred.resolve(filtered);
      }, 2500);
      return deferred.promise;
    }
  });
})();
	<!DOCTYPE html>
	<html>
	<head>
	<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
	<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
	<!--this is what is needed to include when you want to access the search bar-->
	<script src="http://vpunplepun2-01:8082/searchbar/searchbar.js"></script>
	<link rel="stylesheet" href="http://vpunplepun2-01:8082/searchbar/searchbar.css">
	</head>

	<body ng-app='myapp' ng-controller='mainController'>
	<h1>Hello Plunker!</h1>
	<div class="col-md-6 col-md-offset-3">
	<!--here is the manifestation of the directive-->
	<search-bar disp-field="'alias'" service-call='empServiceCall(phrase)' sel-item='selEmp'></search-bar>
	<!--this is the table that woudl be overlapped by the search suggestions-->
	<table class="result-table table table-striped table-condensed">
	<thead>
	<tr><th>emp</th><th>email</th><th>alias</th><th>location</th></tr> <table class="result-table table table-striped table-condensed">
	</thead>
	<tbody>
	<tr><td>1</td><td>emp1@enterprise.com</td><td>emp1</td><td>location</td></tr>
	<tr><td>2</td><td>emp2@enterprise.com</td><td>emp2</td><td>location</td></tr>
	<tr><td>3</td><td>emp3@enterprise.com</td><td>emp3</td><td>location</td></tr>
	<tr> <td>4</td><td>emp4@enterprise.com</td><td>emp4</td><td>location</td></tr>
	<tr><td>5</td><td>emp5@enterprise.com</td><td>emp5</td> <td>location</td> </tr>
	</tbody>
	</table>
	</div>
	</body>

	</html>
	(function(){
	//notice how i add the dependency of te searchbar app in the application here
	var myApp = angular.module("myApp",["app.searchbar"])
	.controller("mainController", function($scope,empService){
	//this is going to be delegated to the directive below
	$scope.empServiceCall = function(phrase){
	return empService.getLikeEmp(phrase); //returns the promise from function call below
	}
	$scope.selEmp = null; //this is where the search bar would return the selected item
	//and now since you have connected the selEmp to the selItem on the manifestation of the directive
	//here is hwo you can read that value when the selection changes.
	$scope.$watch('selEmp', function(newValue, oldValue){
	//this is fires when the user is making some changes to the selected item
	if(newValue!=null){
	console.log("we have selected the new employee from the suggestion:" + newValue.alias);
	}
	});
	})
	.service("empService", function($timeout, $http, $q){
	//this is the service that gets the employees
	//this data should actually come from the server / store , but for convenience im just puttin this out here
	this.getLikeEmp = function(phrase){
	var data = [{empid: 1,alias: "mark",email: "mark@enterprise.com",location: "location1"},
	{empid: 1,alias: "benson",email: "benson@enterprise.com",location: "location1"},
	{empid: 1,alias: "anthony",email: "anthony@enterprise.com",location: "location1"},
	{empid: 1,alias: "michelle",email: "michelle@enterprise.com",location: "location1"},
	{empid: 1,alias: "micheal",email: "micheal@enterprise.com",location: "location1"},
	{empid: 1,alias: "tuchy",email: "tuchy@enterprise.com",location: "location1"},
	{empid: 1,alias: "didi",email: "didi@enterprise.com",location: "location1"},
	]; //we are jus making some dummy data
	var deferred = $q.defer();
	//for the sake of brevity im just mocking up the service call with a timeout interval
	$timeout(function() {
	var filtered = [];
	for (var i = 0; i < data.length; i++) {
	if (data[i].alias.indexOf(phrase) > -1 \|\| data[i].alias == phrase) {
	filtered.push(data[i]); //this should get all the names whose alias does have the phrase or the alias is equal to the phrase
	}
	}
	deferred.resolve(filtered);
	}, 2500);
	return deferred.promise;
	}
	});
	})();