AngularJS textaera enter key submit form with autocomplete

Question

Hello i want to submit my form when i press enter inside my text aera.

My textarea have an autocomplete form created in a angularjs directive (autocompleteAngularExpression)

I have try this :

<textarea ng-keyup="$event.keyCode == 13 && submit()" 
id="inputId" autocomplete-angular-expression> 
</textaera>

The problem is that when i press enter in the autocomplete of my textarea i submit the form.

How can i submit the form only if the autocomplete form is showing ?

My directive is a little complex.

In the scope i have unparsed value

 directive('autocompleteAngularExpression', ['_', '$', function(_, $) {

        function split(val) {
            return val.split( /\s+/ );
        }

        function extractLast(term) {
            return term.split(/[()-\s]+/).pop();
        }

        return {
            require: 'ngModel',
            scope: {
                indexed : "=indexedValue",
                nonIndexedValue : "=nonIndexedValue"
            },
            link: function(scope, element, attrs, ngModel) {

                function containsSomeIndexed(words) {
                    return _.some(words, function(word) {
                        return _.contains(scope.indexedValue, word);
                    });
                }

                ngModel.$parsers.unshift(function(expression) {
                    if (!expression || expression === "") {
                        ngModel.$setValidity('indexValid', true);
                    } else {
                        ngModel.$setValidity('indexValid', containsSomeIndexed(expression.split(/[()-:\s]+/)));
                    }
                    return expression;
                });

                element.autocomplete({
                    minLength: 1,
                    source: function(request, response) {
                        var sourceList;
                        if (containsSomeIndexed(request.term.split(/[()-:\s]+/))) {
                            sourceList = _.union(scope.indexedValue, scope.nonIndexedValue);
                        } else {
                            sourceList = scope.indexedValue;
                        }
                        response($.ui.autocomplete.filter(sourceList, extractLast(request.term)));
                    },
                    focus: function() {
                        return false;
                    },
                    select: function(event, ui) {
                        var selectedValue = ui.item.value;
                        var terms = split(this.value);
                        var partial = terms.pop();
                        var prependBuffer = "";
                        while (partial.charAt(0) === '(' || partial.charAt(0) === '-') {
                            prependBuffer = prependBuffer + partial.charAt(0);
                            partial = partial.substring(1, partial.length);
                        }
                        terms.push(prependBuffer + selectedValue);
                        return false;
                    }
              });
            }
        };
    }]).

Hi, your question is a bit confusing. If you could revise it and make it clear what your issue is and what you want to achieve, that'll help people to answer your question. — Inspector Squirrel
– Inspector Squirrel, Commented Mar 4, 2015 at 10:24
Can you show the code for autocompleteAngularExpression directive? — Vinay K
– Vinay K, Commented Mar 4, 2015 at 11:10
Show the directive you created, maybe we will be able to modify it and the ng-enter directive to answer your requirement — Or Guz
– Or Guz, Commented Mar 4, 2015 at 13:27
@gregouille I would try to set a variable on the scope, which is true when the autocompletelist is opened and change the if statement on ng-enter to if(e.which === 13 && isAutocompleteOpened === false) — Or Guz
– Or Guz, Commented Mar 4, 2015 at 13:57

Pankaj Parkar · Accepted Answer · 2015-03-04 12:37:25Z

16

Instead of doing $event.keyCode == 13 each time write on directive ng-enter, that will do the trick for you.

Try

<textarea ng-enter="submit()" id="inputId" autocomplete-angular-expression> </textaera>

Add this directive to get ngEnter

app.directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown", function(e) {
            if(e.which === 13) {
                scope.$apply(function(){
                    scope.$eval(attrs.ngEnter, {'e': e});
                });
                e.preventDefault();
            }
        });
    };
});

Reference Link

edited Mar 4, 2015 at 12:37

answered Mar 4, 2015 at 10:38

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

brouille Over a year ago

Thank you pankajparkar, it is maybe cleaner this way. But the problem is : when i press enter in the autocomplete box the form is submit !

Pankaj Parkar Over a year ago

@gregouille you don't want to submit form on enter click?

manu29.d Over a year ago

@pankajparkar Ah, that's what I thought. Thanks, it's a nice thing actually. Learnt something new today :)

Collectives™ on Stack Overflow

AngularJS textaera enter key submit form with autocomplete

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related