Skip to content
An angularjs directive for github-like autocomplete
Branch: master
Clone or download
Pull request Compare This branch is 2 commits ahead, 4 commits behind fraserxu:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
lib
.gitignore
README.md
bower.json
ng-textcomplete.js
ng-textcomplete.min.js

README.md

ng-textcomplete

Github like autocompleter in any textarea for angularjs. This module is build on top of jquery-textcomplete, build for angularjs app. For demo you may check the example folder.

Dependencies

Getting started

jQuery MUST be loaded ahead.

<script src="path/to/jquery.js"></script>

Include ng-textcomplete module script with AngularJS script on your page.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="https://raw.github.com/fraserxu/ng-textcomplete/master/ng-textcomplete.js"></script>

Add textcomplete to your app module's dependency.

angular.module('myApp', ['ngTextcomplete'])

.directive('textcomplete', ['Textcomplete', function(Textcomplete) {
    return {
        restrict: 'EA',
        scope: {
            members: '=',
            message: '='
        },
        template: '<textarea ng-model=\'message\' type=\'text\'></textarea>',
        link: function(scope, iElement, iAttrs) {

            var mentions = scope.members;
            var ta = iElement.find('textarea');
            var textcomplete = new Textcomplete(ta, [
              {
                match: /(^|\s)@(\w*)$/,
                search: function(term, callback) {
                    callback($.map(mentions, function(mention) {
                        return mention.toLowerCase().indexOf(term.toLowerCase()) === 0 ? mention : null;
                    }));
                },
                index: 2,
                replace: function(mention) {
                    return '$1@' + mention + ' ';
                }
              }
            ]);

            $(textcomplete).on({
              'textComplete:select': function (e, value) {
                scope.$apply(function() {
                  scope.message = value
                })
              },
              'textComplete:show': function (e) {
                $(this).data('autocompleting', true);
              },
              'textComplete:hide': function (e) {
                $(this).data('autocompleting', false);
              }
            });
        }
    }
}]);

And in your template, use it like this:

<textcomplete members='members' message='message'></textcomplete>

You can also use it in any element with a contenteditable attribute set to true

<div textcomplete members='members' message='message' contenteditable='true'></div>

Install with Bower

Note that the ng-textcomplete bower package contains no AngularJS dependency.

$ bower install ng-textcomplete

This module is still way far from being perfect, but is ready for production. You can use it in your project. And anytime you think it's not good and want to improve it, a pull request is more than welcome.

Build

$ npm install uglify-js -g
$ uglifyjs ng-textcomplete.js > ng-textcomplete.min.js

Contributor

License

Licensed under the MIT License

You can’t perform that action at this time.