CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
FrontEnd Expert
FrontEnd Expert

Reputation: 5803

call function on hit enter in input search field

My Html code:

<div class="input-group">
                <input type="text" class="form-control" placeholder="Enter Text" ng-model="csrModel.accountNumber" />
                <span class="input-group-addon" ng-click="csrModel.search(csrModel.accountNumber)">
                    <i class="fa fa-search"></i>
                </span>
            </div>

I have input box which I am using as a search field. On click of span i am calling ng-click function. Same think I want when user will enter after some text in input field i need to call ng-click function.

enter image description here

Please suggest me what to use. I tried to use some form element but it screw my design. I don't wanna change look and design.

Upvotes: 1

Views: 1944

Answers (3)

Nikola Nikolić
Nikola Nikolić

Reputation: 366

You can use

<input type="text" class="form-control" placeholder="Enter Text" 
ng-model="csrModel.accountNumber" 
ng-keyup="callOnEnter($event,csrModel.accountNumber)"/>

and in JS

$scope.callOnEnter = function($event, accountNumber) {
 if ($event.keyCode === 13) {
   $scope.csrModel.search(accountNumber);
 }
}

It is more angular way

Upvotes: 2

Mahendra Jella
Mahendra Jella

Reputation: 5596

Try this one

<div class="input-group">
                <input type="text" class="form-control" ng-keyup="keyPress($event.keyCode)" placeholder="Enter Text" ng-model="csrModel.accountNumber" />
                <span class="input-group-addon"  ng-click="csrModel.search(csrModel.accountNumber)">
                    <i class="fa fa-search"></i>
                </span>
            </div>

Controller::

$scope.keyPress = function(keyCode){
   console.log(keyCode); 
  if(keyCode == 13)
    {
      // Call the func if user enters 13 i.e for Enter
    } 



}

Upvotes: 1

SrikanthManian
SrikanthManian

Reputation: 148

Bind an ng-keypress or ng-keyup event on the input and in the handler, check for the key-code and accordingly proceed.

<div class="input-group">
            <input type="text" class="form-control" placeholder="Enter Text" ng-model="csrModel.accountNumber" ng-keyup="submitOnEnter()"/>
            <span class="input-group-addon" ng-click="csrModel.search(csrModel.accountNumber)">
                <i class="fa fa-search"></i>
            </span>
        </div>


$scope.submitOnEnter = function () {
/*--------*/
}

Upvotes: 1

Related Questions