A simple but powerful AngularJS directive that allows you to quickly create autocomplete widgets that pull data either from a server or local variable. It started as a rewrite of angucomplete.
- Show just a title, a title and a description or a title, description and image in your autocomplete list.
- Deliberately minimally styled so you can customise it.
- Reads JSON data and allows you to specify which fields to use for display.
Download the code, and include the minified ngCompletr.js file in your page. Optionally add the css. Then add the ngCompletr module to your Angular App file, e.g.
var app = angular.module('app', ["ngCompletr"]);<ng-completr
id="countries_autocomplete"
ng-completr-source="countries"
ng-completr-query="searchCountry.query"
ng-completr-result="searchCountry.result"
ng-completr-search="searchOptions"
ng-completr-display="displayOptions">
<input placeholder="Search countries" type="text" class="form-control" />
</ng-completr>| Option | Required | Description |
|---|---|---|
| ng-completr-source | Y |
The source of the autocomplete. Can be:
|
| ng-completr-query | Y | Query string model. |
| ng-completr-result | Y | The variable that the result will be put into. |
| ng-completr-result-callback | N | Callback function that will be called when a result is selected. |
| ng-completr-search | N |
Search options. An object with the following properties:
|
| ng-completr-display | N |
Display options. An object with the following properties:
|
- ngAutocomplete was taken.
- ngAutocomplete2 / ngAutocompletePro / ngAutocompletePlus sounded bad.
- ngAutocompletr was too close to ngAutocomplete.
- ngComplete wasn't quite 2.0 enough.
- ngCompletr it is!
In lieu of a formal styleguide, take care to maintain the existing coding style. Lint and test your code using Grunt. Also, for new features, add a unit test.
If you're creating a pull request, also please add yourself to the CONTRIBUTORS.txt file.
- 0.0.2 - Initial public release
- 0.0.1 - Internal release
Released under the Apache 2 License.
