ngCompletr

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.

Key Features

• 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.

Getting Started

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"]);

Usage

<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>

Options

Option	Required	Description
ng-completr-source	Y	The source of the autocomplete. Can be: An array of items. A function that will receive the query string and a callback to pass back the results. A string that contains the url that will be queried.
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: delay: Number of miliseconds after which the search will be performed. minLength: Minimum number of characters to trigger a search. data: When using a REST backend, the field of the response that contains the result. fields: When using an array, the fields that will be used to search.
ng-completr-display	N	Display options. An object with the following properties: title: Fields that contain the title of the result. description: Field that contains the description of the result. image: Field that contains the image of the result.

ngCompletr?

• ngAutocomplete was taken.
• ngAutocomplete2 / ngAutocompletePro / ngAutocompletePlus sounded bad.
• ngAutocompletr was too close to ngAutocomplete.
• ngComplete wasn't quite 2.0 enough.
• ngCompletr it is!

Contributing

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.

Release History

• 0.0.2 - Initial public release
• 0.0.1 - Internal release

License

Released under the Apache 2 License.