Is there a way to achieve bootstrap's typeahead suggestive hint feature using only angular, html, and css? I want to dynamically display the first item of the search results in the search box!
<body>
<div ng-app="demoApp" ng-controller='demoCtrl'>
<br>
<input type="text" ng-model="search_term" placeholder="search...">
<br>
<div ng-repeat="(index, item) in items | filter:search_term" ng-class="{'is-first' : index == 0}">{{item}}</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('demoApp', []);
app.controller('demoCtrl', ['$scope', function($scope) {
$scope.items = [
'Apple',
'Apricot',
'Avocado',
'Banana',
'Bilberry',
'Blackberry',
'Blackcurrant',
'Blueberry',
'Boysenberry',
'Cantaloupe',
'Currant',
'Cherry',
'Cherimoya',
'Cloudberry',
'Coconut',
'Cranberry',
'Damson',
'Date',
'Dragonfruit'
];
}]);
</script>
<style>
/* put any CSS you need here */
.is-first {
color:red;
}
</style>
</body>
Any assistance is greatly appreciated!