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

Posted by Tsurendra690-29180 under AngularJS on 1/17/2017 | Points: 10 | Views : 604 | Status : [Member] | Replies : 4
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>




Responses

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

Up
0
Down

Resolved
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

Up
0
Down
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

Up
0
Down
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

Up
0
Down
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

Login to post response