Skip to main content
angular-bootstrap-typeahead

Angular Bootstrap Typeahead Example & Demo

Autocomplete is a very important feature of the select box whenever items are too many, this help to easily search item using user typed character into text box, before the typeahead feature, The selection of a user or item is very difficult from a dropdown list.

This angularjs tutorial help to create autocomplete feature using bootstrap 3 typeahead plugin. You can download a file from Angular bootstrap typeahead directive git repository.

This angular bootstrap type-ahead tutorial help to integrate of bootstrap 3 typeahead using angularjs directive. I will use the following files in this bootstrap typeahead tutorial.

  • app.js : This is a file used to create app, routes, and configuration application level app.
  • index.html: This is the main view file which will render on html view for typeahead control.

Simple Angular Bootstrap Typeahead Example

We will use the angular directive of the bootstrap typeahead plugin. We will define constant data into app.js file to show options in autocomplete input box. You can use ajax json data as well to create dynamic data based on http requests.

We will create ‘sample-angular-bootstrap-typeahead’ folder int c: drive, You can create anywehere into your system.

Step 1: Created index.html file into 'sample-angular-bootstrap-typeahead' and added all dependency files into head section of index.html file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<script src="angular-bootstrap3-typeahead.js"></script>
<script src="app.js"></script>

I have included app.js file as well at the end of all libraries.

Step 2: Added some CSS classes into the head section of index.html file.

.dropdown-menu {
	position:relative;
	width:100%;
	top: 0px !important;
    left: 0px !important;
}

Step 3: Created Typeahead text html field using bootstrap form-control class and passed required directive for angularjs typeahead.

<div class="well col-sm-8"><form><fieldset>
<div class="form-group"><input class="form-control" type="text" placeholder="Start typing something to search..."></div>
</fieldset></form></div>

Where are:

  • bs3-typeahead : Main directive to apply bootstrap typeahead.
  • bs3-source : The source data which will show into autocomplete option.
  • ng-model : The selected value.

Step 4: Create app.js file added the below code into this file.

(function(window, angular, undefined){
	'use strict';
	angular.module('TestApp', [
      'bootstrap3-typeahead'
	]);
	angular.module('TestApp').controller('testController', testController);
	function testController($scope){
		$scope.data = $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
           'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
           'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
           'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
           'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
           'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
           'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
           'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
          'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
      ]
		$scope.value = ''
	}
})(window, window.angular);

As you can see, I have defined 'data' array into controller scope and used into typeahead directive as a source data.

You can download the source code and Demo from the below link.

Leave a Reply

Your email address will not be published. Required fields are marked *