How to search records in text box after triggering enter button in Angularjs?

Question

In this code, when I type the record name it is searching in text box, I need to search the record when I type and click the enter button it should search the record name.

<input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="Google" style="background-color:#5b2c2c;color:white;">
<table  class="table" border="1" style="margin:0;margin-left:90px;background-color:white;width:80%;border:5px solid green">
   <thead>
      <tr>
         <th><a>Google</a></th>
         <th><a>Facebook</a></th>
         <th><a>Twitter</a></th>
         <th><a>Yahoo</a></th>
      </tr>
   </thead>
   <tbody>
      <tr ng-repeat="record in collection | filter:Google" ng-class-even="'stripped'">
         <td>{{record.Google}}</td>
         <td>{{record.Facebook}}</td>
         <td>{{record.Twitter}}</td>
         <td>{{record.Yahoo}}</td>
      </tr>
   </tbody>
</table>

<script>
 var app = angular.module('myapp', []);
 app.controller('myctrl', function($scope) {
     $scope.collection = [{
             Google: 'Dhoni',
             Facebook: 'Simla',
             Twitter: '5000'
         },
         {
             Google: 'Kohli',
             Facebook: 'Manali',
             Twitter: '15000'
         },
         {
             Google: 'Virat',
             Facebook: 'Rajasthan',
             Twitter: '35000'
         },
         {
             Google: 'Yuvraj',
             Facebook: 'Kerala',
             Twitter: '35000'
         },
         {
             Google: 'Singh',
             Facebook: 'Mysore',
             Twitter: '35000'
         },
         {
             Google: 'Murali',
             Facebook: 'OOTY',
             Twitter: '20000'
         },
         {
             Google: 'Vijay',
             Facebook: 'Goa',
             Twitter: '20000'
         }
     ];
 });
</script>

Sreehari S · Accepted Answer · 2017-01-17 10:48:27Z

1

<input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="searchText" style="background-color:#5b2c2c;color:white;">
<button ng-click="Google=searchText">Search</button>

answered Jan 17, 2017 at 10:48

Sreehari S

3881 silver badge12 bronze badges

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

Comments

Jenny · Accepted Answer · 2017-01-17 10:57:23Z

1

You can easily do it by using filter inside controller and on click of button call function. Here $scope.Search is text by which filter is done. and item is set of item on which filter is perform !

    $scope.searchMe = function(){
       $scope.items = $filter('filter')($scope.items, $scope.search);
   }

Do not forget to inject $filter in controller.

answered Jan 17, 2017 at 10:57

Jenny

6634 silver badges8 bronze badges

Comments

Manikandan Velayutham · Accepted Answer · 2017-01-17 11:09:05Z

1

<input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="searchText" style="background-color:#5b2c2c;color:white;">

<tr ng-repeat="record in collection | filter:Google" ng-class-even="'stripped'">
<button ng-click="Google.Facebook=searchText">Search</button> // filter facebook column only
<button ng-click="Google=searchText">Search</button> // can filter any column

edited Jan 17, 2017 at 11:09

answered Jan 17, 2017 at 10:59

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

Comments

Ramesh · Accepted Answer · 2020-02-14 09:45:54Z

0

<input type="text" ng-model="searchText" ng-keyPress="filterbyKeyword($event)" placeholder="Enter keyword to search" />

$scope.filterbyKeyword=function(event)
{
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode=='13')
    {
        //your code 
    }
}

answered Feb 14, 2020 at 9:45

Ramesh

1,56512 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to search records in text box after triggering enter button in Angularjs?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related