How to search records in text box after triggering enter button in angularjs [Resolved]

Posted by Tsurendra690-29180 under AngularJS 1x on 1/17/2017 | Points: 10 | Views : 1409 | Status : [Member] | Replies : 4

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

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, can any one help please , its urgent.

<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>
                           
                


                    [Resolved]
                    


                
                           
                Reply | Reply with Attachment
                               
 Alert Moderator

Responses

Posted by: A2h on: 1/18/2017 [Member] [MVP] Silver | Points: 50

0	We have to use ng-Keyup directive to call search function. Inside search function, we have to get the keycode for enter button and define a logic to display the results only if user pressed the 'enter' button. Complete Code is given below: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> <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' } ]; //Object to hold user input $scope.userInput = {}; //fetch the value and assign to UserInput variable $scope.search = function (event) { if(event.keyCode == 13) { $scope.userInput = $scope.Google; } } }); </script> </head> <body ng-app="myapp"> <div ng-controller="myctrl"> <input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="Google" ng-keyup="search($event)" style="background-color:#5b2c2c;color:white;"> <input type="button" value="Search" ng-click="search()"> <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:userInput" ng-class-even="'stripped'"> <td>{{record.Google}}</td> <td>{{record.Facebook}}</td> <td>{{record.Twitter}}</td> <td>{{record.Yahoo}}</td> </tr> </tbody> </table> </div> </body> </html> Sample working Copy http://jsbin.com/tebakafife/edit?html,console,output Thanks, A2H My Blog Tsurendra690-29180, if this helps please login to Mark As Answer. \| Alert Moderator

We have to use

ng-Keyup

directive to call search function. Inside search function, we have to get the keycode for enter button and define a logic to display the results only if user pressed the 'enter' button.

Complete Code is given below:

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery.min.js"></script>

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>

  <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' }

                ];

                //Object to hold user input

                $scope.userInput = {};

                //fetch the value and assign to UserInput variable

                $scope.search = function (event) {

                    if(event.keyCode == 13)

                    {

                       $scope.userInput = $scope.Google;

                    }

                     

                    

                }



            });

    

    

  </script>

</head>

<body ng-app="myapp">

<div ng-controller="myctrl">

  

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

  <input type="button" value="Search"  ng-click="search()">

<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:userInput" ng-class-even="'stripped'">

                            <td>{{record.Google}}</td>

                            <td>{{record.Facebook}}</td>

                            <td>{{record.Twitter}}</td>

                            <td>{{record.Yahoo}}</td>

                        </tr>

                    </tbody>

                </table>

  </div>



</body>

</html>

Sample working Copy
http://jsbin.com/tebakafife/edit?html,console,output

Thanks,
A2H
My Blog

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 1/17/2017 [Member] [MVP] Silver | Points: 25

0	You can create the filter variable and assign value to it using a function. Please find the sample implementation below Changes in Angular Code Declare an object variable to hold the values and create custom funciton to read the value from textbox //Object to hold user input $scope.userInput = {}; //fetch the value and assign to UserInput variable $scope.search = function () { $scope.userInput = $scope.Google; } now you can change the filter in table to custom variable and then add a button and call search function on click event <tr ng-repeat="record in collection \| filter:userInput" ng-class-even="'stripped'"> <td>{{record.Google}}</td> <td>{{record.Facebook}}</td> <td>{{record.Twitter}}</td> <td>{{record.Yahoo}}</td> </tr> Complete code <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> <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' } ]; //Object to hold user input $scope.userInput = {}; //fetch the value and assign to UserInput variable $scope.search = function () { $scope.userInput = $scope.Google; } }); </script> </head> <body ng-app="myapp"> <div ng-controller="myctrl"> <input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="Google" style="background-color: #5b2c2c; color: white;"> <input type="button" value="Search" ng-click="search()"> <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:userInput" ng-class-even="'stripped'"> <td>{{record.Google}}</td> <td>{{record.Facebook}}</td> <td>{{record.Twitter}}</td> <td>{{record.Yahoo}}</td> </tr> </tbody> </table> </div> </body> </html> Sample Working Demo http://jsbin.com/vizuduzewu/edit?html,output Thanks, A2H My Blog Tsurendra690-29180, if this helps please login to Mark As Answer. \| Alert Moderator

You can create the filter variable and assign value to it using a function.
Please find the sample implementation below

Changes in Angular Code

Declare an object variable to hold the values and create custom funciton to read the value from textbox

//Object to hold user input
                $scope.userInput = {};
                //fetch the value and assign to UserInput variable
                $scope.search = function () {
                    $scope.userInput = $scope.Google;
                }

now you can change the filter in table to custom variable and then add a button and call search function on click event

<tr ng-repeat="record in collection | filter:userInput" ng-class-even="'stripped'">
                            <td>{{record.Google}}</td>
                            <td>{{record.Facebook}}</td>
                            <td>{{record.Twitter}}</td>
                            <td>{{record.Yahoo}}</td>
                        </tr>

Complete code

<html>
        <head>
            <script src="https://code.jquery.com/jquery.min.js"></script>
            <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
            <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width">
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
            <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' }
                    ];
                    //Object to hold user input
                    $scope.userInput = {};
                    //fetch the value and assign to UserInput variable
                    $scope.search = function () {
                        $scope.userInput = $scope.Google;
                    }

                });


            </script>
        </head>
        <body ng-app="myapp">
            <div ng-controller="myctrl">

                <input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="Google" style="background-color: #5b2c2c; color: white;">
                <input type="button" value="Search" ng-click="search()">
                <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:userInput" ng-class-even="'stripped'">
                            <td>{{record.Google}}</td>
                            <td>{{record.Facebook}}</td>
                            <td>{{record.Twitter}}</td>
                            <td>{{record.Yahoo}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </body>
        </html>

Sample Working Demo

http://jsbin.com/vizuduzewu/edit?html,output

Thanks,
A2H
My Blog

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Tsurendra690-29180 on: 1/18/2017 [Member] Starter | Points: 25

0	Dear A2H, Thanks for giving response, but i need to search when i type in textbox and click enter in text box it should search , not with search button. Tsurendra690-29180, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Tsurendra690-29180 on: 1/19/2017 [Member] Starter | Points: 25

0	Thank you very much A2H, Got it its working , could you explain as well as if we click button also Tsurendra690-29180, if this helps please login to Mark As Answer. \| Alert Moderator

Latest Posts