abdo-host · March 19, 2022 12:38
diff --git a/angularjs-typeahead-example.markdown b/angularjs-typeahead-example.markdown
diff --git a/index.html b/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>
diff --git a/script.js b/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});
            });
          }
        );
    });
 })();
diff --git a/style.css b/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;
	}