ng-textcomplete

An angularjs directive for github-like autocomplete

Module License: MIT

Added by: Sam Deering

GitHub

Repository

fraserxu/ng-textcomplete

Stats

Stars: 39

Watchers: 39

Forks: 16

Author

Fraser Xu
Fraser Xu

Module Description

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

Module stats last updated: 2017-08-17 15:00:11

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!