Skip to content
This repository has been archived by the owner on Oct 24, 2022. It is now read-only.

Full-functional autocomplete (typeahead alternative) AngularJS directive

Notifications You must be signed in to change notification settings

DarkNami/np-autocomplete

 
 

Repository files navigation

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:

Attribute Required Description
np-autocomplete Yes Passes options object to the directive.
ng-model No Holds the value of an attribute of the selected item, e.g. "id".
np-input-model No Holds the input element value.
np-selected-item No Holds the whole selected item object.
np-auto No A model which by updating it the following will happen: update np-input-model with its value, clear ng-model, make a request then flushes itself.

Options:

Attribute Type Required Default Value Example Description
url String Yes http://example.com Data source url.
nameAttr String No name full_name Defines the attribute which will be shown in the list (usually, it is the search field).
valueAttr String No id downloads_url Defines the attribute which will be assigned to the ng-model attribute.
limit Integer No 5 10 Sets the value of the limit query param.
limitParam String No limit per_page Query param holds the limit value in requests.
searchParam String No search query Query param holds the search text in requests.
queryMode Boolean No true false Determines if the searchParam will be in query mode or param mode, in case it has been set to false (param mode) then you should include :searchParam string in your url where the search value goes.
delay Integer No 500 (ms) 1000 (ms) Time in milliseconds which delays request after changing the search text.
minlength Integer No 1 5 The minimum length of string required before start searching.
dataHoder String No items The name of the field in the retrieved data which holds the array of objects those will be used for the autocomplete.
clearOnSelect Boolean No false true Either clear the search text after selecting an item or not.
highlightExactSearch Boolean No true false either highlight with exact pattern or each portion separately.
template String (HTML) No Overrides the default template.
templateUrl String No Gets template with $templateCache to overrides the default template.
itemTemplate String (HTML) No Overrides the default template of the list item.
itemTemplateUrl String No Gets template with $templateCache to overrides the default template of the list item.
params Object No { sort: 'stars' } Extra params to send with each request.
errorMessage String No Something went wrong. An error occurred. A message to be shown when an error occur.
noResultsMessage String No No results found. Couldn't find anything. A message to be shown when no results found.
listClass String No list-group list-group np-list Class(es) to be added to the list.
itemClass String No list-group-item list-group-item np-list-item Class(es) to be added to each item in the list.
messageClass String No list-group-item list-group-item np-message-item Class(es) to be added to each message item.
highlightClass String No bg-info text-info np-highlight Class(es) to be added to the highlighted text.
itemFocusClass String No active np-active Class(es) to be added to the focused item.
hasSelectionClass String No np-autocomplete-has-selection has-selection Class(es) to be added to the directive wrapper when a selection made.
openStateClass String No np-autocomplete-open np-autocomplete-open open-state Class(es) to be added to the directive wrapper in 'open' state.
loadStateClass String No np-autocomplete-load np-autocomplete-load load-state Class(es) to be added to the directive wrapper in 'load' state.
closeStateClass String No np-autocomplete-close np-autocomplete-close close-state Class(es) to be added to the directive wrapper in 'closed' state.
errorStateClass String No np-autocomplete-error np-autocomplete-error error-state Class(es) to be added to the directive wrapper in 'load' state.
each Function No function(item) {
console.log(item);
}
Iterates over elements of retrived data.
onBlur Function No function() {
console.log('focus lost');
}
a callback function called when the directive loses focus.
onError Function No function(errorData) {
console.log(errorData);
}
A callback function called when an error occur.
onSelect Function No function(item) {
console.log(item);
}
A callback function called when a selection is made.
onDeselect Function No function() {
console.log('Lost selection');
}
A callback function called when the selection is lost.

About

Full-functional autocomplete (typeahead alternative) AngularJS directive

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 98.8%
  • CSS 1.2%