np-autocomplete v2.1.1

Np-autocomplete

Np-autocomplete is a full-functional autocomplete (typeahead alternative) AngularJS directive.

Key Features:

• The easiest to setup.
• 100% compatible and optimised by default for bootstrap 3.3.5+
• Provides 4 models: ngModel, npInputModel, npAuto and selectedItem.
• You are free to use built-in angular directives such ngForm and ngRequired.
• Uses the transclusion, which gives the flexibility with the input element.
• Customizable in the way you like.
• Multiple states (close, open, load and error).

Requirements:

• JQuery 2.1.4+.
• AngularJS 1.3.16+.
• Bootstrap 3.3.5+ (for default template).

Getting Started:

Download the package, then include dist/np-autocomplete.min.js and dist/np-autocomplete.min.css in your page.

bower install np-autocomplete --save

Now, add it to your angular module dependencies list as the following:

angular.module('yourModule', [
  'ng-pros.directive.autocomplete',
  ...
]);

Note: if you were using version 1.0.x then refer to CHANGELOG.

Quick Usage:

html:

<div class="form-group" np-autocomplete="npAutocompleteOptions" ng-model="repoID">
  <label class="control-label">Repository</label>
  <input class="form-control" type="text"/>
</div>

js:

myAngularApp.controller('ctrl', ['$scope', function($scope) {
  $scope.npAutocompleteOptions = {
    url: 'https://api.github.com/search/repositories'
  };
}]);

You can also see the demos.

Attributes:

Options: