abdo-host/angularjs-typeahead-example.markdown

## angularjs-typeahead-example.markdown

      
    Raw
  

              angularjs-typeahead-example.markdown
            
          
    AngularJS - Typeahead Example

Trying to create a hashtag with multiple Typeahead modals
A Pen by Abdo Hamoud on CodePen.
License.

  
## index.html
<html data-ng-app="TypeAhead">
	  <head>
		    <title>Text Auto Complete</title>
		    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-sanitize.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-route.min.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
	  </head>
	  <body>
    <script type="text/ng-template" id="tierOneTemplate.html">
       <a tabindex="-1">
          <span ng-bind-html="match.model.name | typeaheadHighlight:query"></span>
       </a>
    </script>
		    <div data-ng-controller="TypeAheadCtrl">
          <h3>AngularJS Typeahead Example</h3>
			      <textarea
				        rows="4"
				        cols="50"
        class="tierOneTextArea"
        autocomplete="off"
				        ng-model="selectedTierOneData"
        typeahead="tierOne as tierOne.name for tierOne in tierOneData | filter:{name:$viewValue}" class="tierOneTextArea"></textarea>
		    </div>
	  </body>
</html>

## script.js
/**
* In order to use typeahead it is required to append ui.bootstrap and
* ngSanitize, so that the external data can be displayed in the dropdown
*/
(function(){
    'use strict';
    angular
      .module('TypeAhead',[
			'ui.bootstrap',
      'ngSanitize'
		])
    .controller('TypeAheadCtrl', function($scope, $http) {
        $scope.tierOneData = [];
   $http.get('https://jsonplaceholder.typicode.com/posts/')
          .success(function(data) {
            angular.forEach(data, function(item){
              $scope.tierOneData.push({name:item.title});
            });
          }
        );
    });
})();

## style.css
.tierOneTextArea {
  margin:0px 0 0 30px;
  border: 1px solid #000;
}
h3 {
  padding: 30px 0 0 30px;
}
	<html data-ng-app="TypeAhead">
	<head>
	<title>Text Auto Complete</title>
	<meta charset="UTF-8" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-sanitize.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-route.min.js"></script>
	<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
	</head>
	<body>
	<script type="text/ng-template" id="tierOneTemplate.html">
	<a tabindex="-1">
	<span ng-bind-html="match.model.name \| typeaheadHighlight:query"></span>
	</a>
	</script>
	<div data-ng-controller="TypeAheadCtrl">
	<h3>AngularJS Typeahead Example</h3>
	<textarea
	rows="4"
	cols="50"
	class="tierOneTextArea"
	autocomplete="off"
	ng-model="selectedTierOneData"
	typeahead="tierOne as tierOne.name for tierOne in tierOneData \| filter:{name:$viewValue}" class="tierOneTextArea"></textarea>
	</div>
	</body>
	</html>
	/**
	* In order to use typeahead it is required to append ui.bootstrap and
	* ngSanitize, so that the external data can be displayed in the dropdown
	*/
	(function(){
	'use strict';
	angular
	.module('TypeAhead',[
	'ui.bootstrap',
	'ngSanitize'
	])
	.controller('TypeAheadCtrl', function($scope, $http) {
	$scope.tierOneData = [];
	$http.get('https://jsonplaceholder.typicode.com/posts/')
	.success(function(data) {
	angular.forEach(data, function(item){
	$scope.tierOneData.push({name:item.title});
	});
	}
	);
	});
	})();
	.tierOneTextArea {
	margin:0px 0 0 30px;
	border: 1px solid #000;
	}
	h3 {
	padding: 30px 0 0 30px;
	}