入力後に値を検索し、テキストボックスに入力ボタンを押す方法

以下のコードでは、検索する値があります。検索ボックスに値を入力すると、入力時に検索してEnterボタンをクリックする必要があります入力フィールドに入力します。入力後に値を検索し、テキストボックスに入力ボタンを押す方法

<!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> 
     $(document).ready(function() { 

     }); 
    </script> 
    <script> 
     var app = angular.module('myapp', []); 
     app.controller('myctrl', function ($scope) { 
      $scope.collectionCopy = []; 
      $scope.hided = false; 
      $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; 
       } 
       else 
       { 
        $scope.userInput = $scope.Google; 
       } 


      } 
      angular.copy($scope.collection,$scope.collectionCopy); 

      $scope.hide = function() 
      { 
       $(".col2").toggle(1000); 
       angular.copy($scope.collection,$scope.collectionCopy); 
       if($scope.hided == false) 
       { 
       for(var i = 0; i < $scope.collectionCopy.length; i++) { 
        var obj = $scope.collectionCopy[i]; 

        //if(listToDelete.indexOf(obj.id) !== -1) { 
         delete obj['Facebook']; 
         delete obj['Twitter']; 

        //} 
       } 
       $scope.hided = true; 
       } 
       else 
       { 
       angular.copy($scope.collection,$scope.collectionCopy); 
       $scope.hided = false; 
       } 
      } 


     }); 
    </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 ng-click="hide()" class="col1"><a>Google</a></th> 
        <th ng-hide="hided" class="col2"><a>Facebook</a></th> 
        <th ng-hide="hided" class="col2"><a>Twitter</a></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="record in collectionCopy | filter:userInput" ng-class-even="'stripped'"> 
        <td >{{record.Google}}</td> 
        <td ng-hide="hided" class="col2">{{record.Facebook}}</td> 
        <td ng-hide="hided" class="col2">{{record.Twitter}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</body> 
</html>

出典

2017-01-25 manideep

検索機能では、入力キーを調べて検索していますが、それ以外の場合は検索しています。私は

See this edited plunkr

$scope.search = function (event) { 
       if (event.keyCode == 13) { 
        $scope.searcher(); 
       } 
      } 
      $scope.searcher = function() { 
       $scope.userInput = $scope.Google; 
      } 

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

出典

2017-01-25 05:18:24

はどうもありがとうございました（あまりにもボタンのonclickの変化に確認してください）キーを押すか、ボタンがクリックされて入力した場合にのみトリガされた探索機能を、作成しました – manideep

入力後に値を検索し、テキストボックスに入力ボタンを押す方法

答えて

関連する問題