Giter Club home page Giter Club logo

ng-textcomplete's Introduction

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

ng-textcomplete's People

Contributors

amanjain avatar bfontaine avatar fraserxu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

ng-textcomplete's Issues

Trying to implement escape key to reset input

I want to add an escape key down event to your directive which resets the input (the message) value.
I have added a directive which watches an escape key-down event and executes code. The event is fired and my code executes, but the input is not changing.

I guess it has something to do with the fact that you are watching key-down events too or the fact the autocomplete input element has focus at the moment I am changing the message which this element is bound to.

I am not javascript savvy enough to do this. Could you give me some clues on how to do this ?

Sander.

Examples don't work

The provided example doesn't seem to do anything. There's no autocomplete functionality.

refocus causes: Error: [$rootScope:inprog] $digest already in progress

the focus() causes this error when clicking in the textarea. why need I refocus something that is already focused?

UPDATE: just seen it doesn't work normally without the refocus..

        // Refocus the textarea if it is being focused
        focused = this.el === document.activeElement;
        this.$el.wrap($wrapper).before($list);
        if (focused) {
            this.el.focus();
        }

Working with div contenteditable="true"

Hi,

I was playing with this nice module and I was wondering if it possible to modifiy the 'local' textcomplete directive template? Making it works with

instead of textarea?

template: <div contenteditable="true" ng-model=\'message\' ></div> 

instead of

template: '<textarea ng-model=\'message\' type=\'text\'></textarea>',

Thanks,
Luca

License

Hello,

What’s ng-textcomplete’s license? Could you please add a LICENSE file? Thanks!

Make it work with div contenteditable element

Could it be possible to use like this:

                <div contenteditable="true"
                      ng-model="textInput"
                      autocomplete="{{items}}"></div>

and the directive then uses your ng-textcomplete...

it works just fine when using a textarea, but when using it with a div contenteditable the element has no value so I made the following change in your code:

        getTextFromHeadToCaret: function() {
            var text, selectionEnd, range;
            selectionEnd = this.el.selectionEnd;
            if (typeof selectionEnd === 'number') {
                text = this.el.value.substring(0, selectionEnd);
            } else if (document.selection) {
                range = this.el.createTextRange();
                range.moveStart('character', 0);
                range.moveEnd('textedit');
                text = range.text;
            } else {
                text = this.el.textContent;
            }
            return text;
        },

with this little change the dropdown appears also in contenteditable div, but one problem is that selectionEnd is undefined, and when selecting a item from the dropdown, it will not be inserted .. can you help me solve this?

nice angular module btw!

Add way to implement "display names" instead of just values.

Not sure how to describe this, so I'll provide an example.

Ideally, it would be nice if you could pass in an array of objects to the directive. Maybe something like [{text: 'Kevin E', value: 'kevin'}, {text: 'Bob Barker', value: 'bob'}, ...]

So, when you begin typing, it will base it on either the text or value attribute, but return the value attribute in the textbox.

bower package is not up-to-date

I don't know what's exactly the problem but when I do a clean bower install the javascript code don't matches with the current code in master in the git repository!

So where does bower get the code?

best regards

Can't change "members" value dynamically.

I am unable to change $scope.members values on the basis of typed character.
for example if we want only 10 members name starts with user Input (say 'N'). then fetch 10 records from database whose name start with 'N'. next if user input 'I' then fetch 10 records from database whose name start with 'NI'.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.